Блог

Я работаю над проектом .net, и у меня есть горизонтальное меню вкладок. Я хочу изменить цвет фона вкладки, на которую я нажимаю, и вернуть всем остальным вкладкам цвет по умолчанию с помощью JavaScript. Однако каждый раз, когда я нажимаю на вкладку, цвет фона меняется, а когда я отпускаю кнопку, цвет фона исчезает. Ниже приведен мой код

  <div class="menu-control" id="SiteMenu" runat="server" visible="false">
                <ul class="routes-nav">
                    <li class="nav-tab  " onclick="setActiveTab(event)">
                        <asp:LinkButton ID="ARoute" runat="server" CssClass="tab-menu" OnClick="ARoute_Click">A Routes</asp:LinkButton>
                    </li>
                    <li class="nav-tab" onclick="setActiveTab(event)">
                        <asp:LinkButton ID="BRoute" runat="server" CssClass="tab-menu" OnClick="BRoute_Click">B Routes</asp:LinkButton>
                    </li>
                    <li class="nav-tab" onclick="setActiveTab(event)">
                        <asp:LinkButton ID="GRoute" runat="server" CssClass="tab-menu" OnClick="GRoute_Click">Grass Routes</asp:LinkButton>
                    </li>
                    <li class="nav-tab" onclick="setActiveTab(event)">
                        <asp:LinkButton ID="WRoute" runat="server" CssClass="tab-menu" OnClick="WRoute_Click">Watering Routes</asp:LinkButton>
                    </li>
                    <li class="nav-tab" onclick="setActiveTab(event)">
                        <asp:LinkButton ID="PRoute" runat="server" CssClass="tab-menu" OnClick="PRoute_Click">Planting Routes</asp:LinkButton>
                    </li>
                </ul>
            </div>
  

CSS:

     .tab-menu{
            display:block;
            border:1px solid var(--borderColor);
            border-top-left-radius:5px;
            border-top-right-radius:5px;
            background-color:var(--tabDefault);
            border-bottom:0;
            padding:10px 20px 10px 10px;
            color: black;
            
        }
.activeTab {
    background-color: var(--focusColor);
}
  

JavaScript:

 function setActiveTab(tab)
{
    var tabs = document.getElementsByClassName("nav-tab");
    for (let i = 0; i < tabs.length; i  )
    {
        tabs[i].className = tabs[i].className.replace(/bacitveTabb/g, "");
    }
    tab.currentTarget.className  = " activeTab";
 }
  

Может кто-нибудь помочь увидеть, что я делаю неправильно? Спасибо

Вы можете попробовать изменить параметр внутри тега функции setActiveTab on li на setActiveTab(this) . this в данном случае означает: текущий li тег.

 <li class="nav-tab" onclick="setActiveTab(this)">
    <asp:LinkButton ID="ARoute" runat="server" CssClass="tab-menu" OnClick="ARoute_Click">A Routes</asp:LinkButton>
</li>
  

Затем ваш js-код должен быть:

 function setActiveTab(currentTab)
{
    var tabs = document.getElementsByClassName("nav-tab");
    for (let i = 0; i < tabs.length; i  )
    {
        var tab = tabs[i];
        tab.className = tab.className.replace(/bacitveTabb/g, "");
    }
    currentTab.className  = " activeTab";
 }
  

Вы также можете написать это короче:

 function setActiveTab(currentTab)
{
    var activeTab = document.querySelector(".activeTab");
    if (activeTab) {
        activeTab.className = activeTab.className.replace(/bacitveTabb/g, "");
    }
    currentTab.className  = " activeTab";
 }