使用jQuery将Active类添加到活动选项卡元素，具体取决于加载的页面

Question

我的问题是：

• 如何在未激活的jQuery或其他任何内容的元素中向活动标签添加一个类？

• 必须使下拉选项卡包含活动标签＆amp;并不总是公司的。

在排序中，我需要能够从其他选项卡中激活选项卡弹出窗口并使其显示下拉选项卡是包含活动选项卡的选项卡。

这就是它的样子：

$(document).ready(function(){

// Makes all other dropdowns vanish
  function slideAllUp(obj)
  {
     $(".hideothers").each(function(){
       
       if ($(this)[0] != obj[0])
       {
         $(this).hide(); //perform on all except self.
       }
     })
  }

// Sets active tab (adds class to active tab)
  $('.sidebar-menu li').on('click', function () {

      $(this).siblings().removeClass('clicked');
      $(this).addClass('clicked');


  });
  

$(".hideothers").hide();

// Account dropdown
    $(".slidingDiv_account").hide();
    $(".show_hide_account").show();
    
    $(".show_hide_account").click(function(){
    slideAllUp($(".slidingDiv_account"));
    $(".slidingDiv_account").slideDown();
    });

// Company dropdown
    $(".slidingDiv_company").show();
    $(".show_hide_company").show();
    // $(".hideothers").hide();
    
    $(".show_hide_company").click(function(){
    slideAllUp($(".slidingDiv_company"));
    $(".slidingDiv_company").slideDown();
    });

// Invest dropdown
    $(".slidingDiv_invest").hide();
    $(".show_hide_invest").show();
    // $(".hideothers").hide();
    
    $(".show_hide_invest").click(function(){
    slideAllUp($(".slidingDiv_invest"));
    $(".slidingDiv_invest").slideDown();
    });

  });

ul.sidebar-menu , ul.sidebar-menu li ul.sub{
    margin: -2px 0 0;
    padding: 0;
}

ul.sidebar-menu {
    margin-top: 75px;
}

ul.sidebar-menu li a span{
    display: inline-block;
}

ul.sidebar-menu li a{
    color: #aeb2b7;
    text-decoration: none;
    display: block;
    padding: 15px 0 15px 10px;
    font-size: 12px;
    outline: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

ul.sidebar-menu li a.active, ul.sidebar-menu li a:hover, ul.sidebar-menu li a:focus {
    background: #68dff0;
    color: #fff;
    display: block;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}


ul.sidebar-menu li a i {
    font-size: 15px;
    padding-right: 6px;
}

ul.sidebar-menu li a:hover i, ul.sidebar-menu li a:focus i {
    color: #fff;
}

ul.sidebar-menu li a.active i {
    color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--sidebar start-->
      <aside>
      <!-- Start of Toggle -->
        <div id="sidebar"  class="nav-collapse ">
          <!-- sidebar menu start-->
          <ul class="sidebar-menu" id="nav-accordion">

          <div class="top_menu">
            <span class="show_hide_company">Company<i class="fa fa-briefcase"></i></span>
            <span class="show_hide_invest">Invest<i class="fa fa-line-chart"></i></span>
            <span class="show_hide_account">Account<i class="fa fa-user"></i></span>
          </div><br>


          <!-- Account Dropdown --> 
            <div class="slidingDiv_account hideothers"> <!-- Start of toggle -->
              <li>
                <a href="/inbox">
                  <i class="fa fa-inbox"></i>
                  <span>Inbox</span>
                </a>
              </li>
              <li>
                <a href="/users-companies">
                  <i class="fa fa-search"></i>
                  <span>Users & Companies</span>
                </a>
              </li>
              <li>
                <a href="/account">
                  <i class="fa fa-pencil"></i>
                  <span>Edit Account</span>
                </a>
              </li>
              <li>
                <a href="/request-help">
                  <i class="fa fa-question"></i>
                  <span>Request & Help</span>
                </a>
              </li>
            </div> <!-- end of toggle -->


          <!-- Company Dropdown -->
            <div class="sub slidingDiv_company hideothers" style="display: block;"> <!-- Start of toggle -->
              
              <%if Company.where(:user_id => current_user.id).count==0 || current_user.premium%>
              <li>
                <a href="/companies/new">
                  <i class="fa fa-star"></i>
                  <span>Start a Startup</span>
                </a>
              </li>
              <%end%>

              <%if Company.where(:user_id => current_user.id).count>=1%>
              <li>
                <a href="/companies">
                  <i class="fa fa-building"></i>
                  <%if Company.where(:user_id => current_user.id).count==1%>
                    <span>Company</span>
                  <%elsif Company.where(:user_id => current_user.id).count>1%>
                    <span>Companies</span>
                  <%end%>
                </a>
              </li>
              <%end%>
              
              <li>
                <a href="/trade">
                  <i class="fa fa-exchange"></i>
                  <span>Trade</span>
                </a>
              </li>

              <li>
                <a href="/profit-and-loss">
                  <i class="fa fa-list"></i>
                  <span>Profit & Loss</span>
                </a>
              </li>

              <li>
                <a href="/upgrade">
                  <i class="fa fa-arrow-up"></i>
                  <span>Upgrade</span>
                </a>
              </li>

              <li>
                <a href="/employes/find">
                  <i class="fa fa-search"></i>
                  <span>Find Employes</span>
                </a>
              </li>
              

            </div> <!-- end of toggle -->
          

          <!-- Invest Dropdown -->
            <div class="sub slidingDiv_invest hideothers" style="display: block;"> <!-- Start of toggle -->
              <li>
                <a href="/stock-market">
                  <i class="fa fa-line-chart"></i>
                  <span>Stock Market</span>
                </a>
              </li>

              <li>
                <a href="/find-investors">
                  <i class="fa fa-search"></i>
                  <span>Find Investors</span>
                </a>
              </li>

              <li>
                <a href="/investments">
                  <i class="fa fa-list"></i>
                  <span>Invest</span>
                </a>
              </li>

              <li>
                <a href="/properties">
                  <i class="fa fa-bank"></i>
                  <span>Properties</span>
                </a>
              </li>

              <li>
                <a href="/advertisement">
                  <i class="fa fa-tv"></i>
                  <span>Advertisment</span>
                </a>
              </li>

            </div> <!-- end of toggle -->
          

            <li class="mt">
              <!--                       <a href="index.html"> -->
              <!--                           <i class="fa fa-search"></i> -->
              <!--                           <span>Browse Events</span> -->
            </a>
          </li>

        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    <!--sidebar end -->

点击公司，账户和投资，查看“下拉列表”。

注意：当您单击选项卡时，它会加载新页面。

Answer 1

您需要做的就是为li元素添加一个单击处理程序，并从所有同级中移除活动类，并将class active添加到当前单击的li项。这将确保只有单击的链接处于活动状态，其余部分不包含活动类

这是执行此操作的jquery代码：

 $('.sidebar-menu li').on('click', function () {

      $(this).siblings().removeClass('active');
      $(this).addClass('active');


  });

这是一个工作示例（单击Run snippet）：

＆＃13;

＆＃13;

$(document).ready(function(){

  $('.menu li').on('click', function () {
      
      $(this).siblings().removeClass('active');
      $(this).addClass('active');
      
      
  });
    
  });

＆＃13;

.active{
    
color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
    <li class="active">Menu Item 1</li>
    <li> Menu Item 2</li>
     <li> Menu Item 3</li>
     <li> Menu Item 4</li>
    
</ul>

＆＃13;

＆＃13;

＆＃13;

Here is the fiddle link

<强>更新

即使对于您的菜单，您也可以使用与上述相同的逻辑。你真正需要做的只是改变一些类名和相同的逻辑可以使用

 $('.top_menu span').on('click', function () {

         $('.top_menu span').removeClass('active');
          $(this).addClass('active');


      });