单击非活动链接并切换选项卡时，活动状态消失

There's a strange issue I'm having with my code's active state, that only appears when I click on another link and then switch tabs: http://fiddle.jshell.net/3nafff9d/

我的代码处于活动状态时出现了一个奇怪的问题,只有当我点击另一个链接然后切换标签时才出现这个问题:http://fiddle.jshell.net/3nafff9d/

To replicate my problem you must do the following:

要复制我的问题,您必须执行以下操作:

Run the JSFiddle above at 769 width for the menu to show up.

以769宽度运行上面的JSFiddle以显示菜单。
Notice that All the "active" list items are blue, and by default the the Call Me link is selected on all the tabs you switch to.

请注意,所有“活动”列表项都是蓝色,默认情况下,在您切换到的所有选项卡上都会选中“呼叫我”链接。
Now click on the next link the Log link until you see the active state color of blue.

现在单击Log链接的下一个链接,直到看到蓝色的活动状态颜色。
Now click on the another tab, and you'll notice that all of a sudden the active state has been removed from the menu. Now no items are blue.

现在单击另一个选项卡,您会注意到已经从菜单中删除了活动状态。现在没有项目是蓝色的。

Now my question is: How can I change the code so that the active state color: blue is remembered even when you switch tabs or select another list item?

现在我的问题是:如何更改代码,以便即使切换选项卡或选择其他列表项时也会记住活动状态颜色:蓝色?

JS:

//Selection Active       
$('.sidebar-nav a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav2 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav3 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav4 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Custom Toggle  
$('input[name="intervaltype"]').click(function () {

    $('#Custom').toggleClass('active');
    $('#Types').toggleClass('active');
});

//Custom Toggle  
$('input[name="intervaltype2"]').click(function () {

    $('#Custom2').toggleClass('active');
    $('#Types2').toggleClass('active');
});

//Custom Toggle  
$('input[name="intervaltype3"]').click(function () {

    $('#Custom3').toggleClass('active');
    $('#Types3').toggleClass('active');
});

//Custom Toggle  
$('input[name="intervaltype4"]').click(function () {

    $('#Custom4').toggleClass('active');
    $('#Types4').toggleClass('active');
});


//Check and Uncheck
$(".checkAll").click(function () {
    $(".check").prop('checked', $(this).prop('checked'));
});

//Check and Uncheck Below-2
$(".checkBelow").click(function () {
    $(".checkother").prop('checked', $(this).prop('checked'));
});

//Custom Check and Uncheck All-2
$(".checkAll2").click(function () {
    $(".check2").prop('checked', $(this).prop('checked'));
});

//Check and Uncheck Below-2
$(".checkBelow2").click(function () {
    $(".checkother2").prop('checked', $(this).prop('checked'));
});


//Check and Uncheck 3
$(".checkAll3").click(function () {
    $(".check3").prop('checked', $(this).prop('checked'));
});

//Check and Uncheck Below-3
$(".checkBelow3").click(function () {
    $(".checkother3").prop('checked', $(this).prop('checked'));
});

//Custom Check and Uncheck All-4
$(".checkAll4").click(function () {
    $(".check4").prop('checked', $(this).prop('checked'));
});

//Check and Uncheck Below-4
$(".checkBelow4").click(function () {
    $(".checkother4").prop('checked', $(this).prop('checked'));
});



//Selection Active       
$( '.servicelist a' ).on('shown.bs.tab', function(e){
  if ( !$(this).hasClass( 'active' ) ) {
    $( '.servicelist .active' ).removeClass( 'active' );
    $( '.servicelist a[href="' + $(this).attr( 'href' ) + '"]' ).parent().addClass( 'active' );
  }
});

HTML

<div id="sidebar-wrapper2">

         <!-- Sidebar -->
   <div class="topfilter">

     <div class="tabber">

   <!-- Nav tabs -->
  <ul class="servicelist" role="tablist">

    <li class="col-md-3 col-xs-3 serviceop active" role="presentation">
    <a href="#construction" aria-controls="construction" role="tab" data-toggle="tab">
    <i class="fa-2x fa fa-home"></i>
    </a>
    </li>

    <li class="serviceop col-md-3 col-xs-3"  role="presentation">
    <a href="#precon" aria-controls="precon" role="tab" data-toggle="tab">
    <i class="fa-2x fa fa-info-circle"></i> 
    </a>
    </li>

    <li class="col-md-3 col-xs-3 serviceop" role="presentation">
    <a href="#generalcon" aria-controls="generalcon" role="tab" data-toggle="tab">
    <i class="fa-2x fa fa-briefcase"></i> 
    </a>
    </li>

    <li class="col-md-3 col-xs-3 serviceop" role="presentation">
    <a href="#builddesign" aria-controls="builddesign" role="tab" data-toggle="tab">
    <i class="fa-2x fa fa-bullhorn"></i>
    </a>
    </li>

  </ul>

</div> <!-- End Tabber-->
</div><!-- End Topfilter-->

</div> <!-- End sidebar-wrapper 2--> 


   <!-- Tab panes -->
 <div class="tab-content">

    <div role="tabpanel" class="tab-pane fade in active" id="construction"> 

<div id="sidebar-wrapper3">

             <li class="toppy" role="tab" style="list-style:none;">
            <label data-target="#Custom"> <span class="customtext">Choose</span>    
                <input name="intervaltype" class="check checkAll chix" type="checkbox" />
                       </label>
        </li>


</div>                       
<div class="tab-content" id="sidebar-wrapper">


   <div role="tabpanel" class="tab-pane" id="Custom">

    <ul class="sidebar-nav">

     <form role="form">
  <div class="form-group">

      <div class="checkbox">
    <label>
      <input type="checkbox" class="check checkBelow"> Settings
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check checkother"> Log out
    </label>
  </div>


    <div class="checkbox">
    <label>
      <input type="checkbox" class="check checkother">Profile
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check checkother"> Account
    </label>
  </div>

  </div><!-- End Form-group -->
  </form>

   </ul> <!-- End Sidebar Nav-->

        </div> <!-- End Tab Panel-->


  <div role="tabpanel" class="tab-pane active" id="Types">

    <ul class="sidebar-nav">

          <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="active highlight" data-toggle="collapse" data-parent="#accordion" href="#collapseZero"><span class="iconpad glyphicon glyphicon glyphicon-asterisk">
                            </span>Call Me</a>
                        </h4>
                    </div><!-- End Panel-Heading -->



 <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="highlight" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="iconpad glyphicon glyphicon-user">
                            </span>Log</a>
                        </h4>
                    </div> <!-- End Panel-Heading -->

       <div id="collapseOne" class="panel-collapse collapse in">
      <li>
      <a class="highlight" href="#/content">
       Loglines
       </a>
      </li>
       </div>  <!-- End CollapseOne -->


    <div class="bottomfilter">
   <a href="#" class="filtertitle">Terms</a>    

   </div>  <!-- End Bottom Filter -->


  </div> <!-- End Panel Default in Accordion -->

   </div><!-- End Accordion -->


    </div> <!-- End Panel Default -->


   </ul> <!-- End Sidebar Nav-->


   </div> <!-- End Types 1 -->


    </div> <!-- End SideBar Wrapper 1 -->

</div> <!-- End Tab Panel -->

    <div role="tabpanel" class="tab-pane fade" id="precon">
 <div id="sidebar-wrapper3">

             <li class="toppy" role="tab" style="list-style:none;">
            <label data-target="#Custom2"> <span class="customtext">Choose</span>    
                <input name="intervaltype2" class="check2 checkAll2 chix" type="checkbox" />
                       </label>
        </li>


</div>                       
<div class="tab-content" id="sidebar-wrapper">


   <div role="tabpanel" class="tab-pane" id="Custom2">

    <ul class="sidebar-nav2">

     <form role="form">
  <div class="form-group">

      <div class="checkbox">
    <label>
      <input type="checkbox" class="check2 checkBelow2"> Settingz
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check2 checkother2"> Log outz
    </label>
  </div>


    <div class="checkbox">
    <label>
      <input type="checkbox" class="check2 checkother2">Profile
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check2 checkother2"> Account
    </label>
  </div>

  </div><!-- End Form-group -->
  </form>

   </ul> <!-- End Sidebar Nav-->

        </div> <!-- End Tab Panel-->


  <div role="tabpanel" class="tab-pane active" id="Types2">

    <ul class="sidebar-nav2">

          <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="active" data-toggle="collapse" data-parent="#accordion2" href="#bcollapseZero"><span class="iconpad glyphicon glyphicon glyphicon-asterisk">
                            </span>Call Mez</a>
                        </h4>
                    </div><!-- End Panel-Heading -->


 <div class="panel-group" id="accordion2">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="highlight" data-toggle="collapse" data-parent="#accordion2" href="#bcollapseOne"><span class="iconpad glyphicon glyphicon-user">
                            </span>Logz</a>
                        </h4>
                    </div> <!-- End Panel-Heading -->

       <div id="bcollapseOne" class="panel-collapse collapse in">
      <li>
      <a class="highlight" href="#/content">
       Loglinez
       </a>
      </li>
       </div>  <!-- End CollapseOne -->


    <div class="bottomfilter">
   <a href="#" class="filtertitle">Termz</a>    

   </div>  <!-- End Bottom Filter -->


  </div> <!-- End Panel Default in Accordion -->

   </div><!-- End Accordion -->


    </div> <!-- End Panel Default -->


   </ul> <!-- End Sidebar Nav-->


   </div> <!-- End Types 1 -->


    </div> <!-- End SideBar Wrapper 1 -->

</div> <!-- End Tab Panel -->



      <div role="tabpanel" class="tab-pane fade" id="generalcon">

 <div id="sidebar-wrapper3">

             <li class="toppy" role="tab" style="list-style:none;">
            <label data-target="#Custom3"> <span class="customtext">Choose</span>    
                <input name="intervaltype3" class="check3 checkAll3 chix" type="checkbox" />
                       </label>
        </li>


</div>                       
<div class="tab-content" id="sidebar-wrapper">


   <div role="tabpanel" class="tab-pane" id="Custom3">

    <ul class="sidebar-nav3">

     <form role="form">
  <div class="form-group">

      <div class="checkbox">
    <label>
      <input type="checkbox" class="check3 checkBelow3"> Settingz
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check3 checkother3"> Log outz
    </label>
  </div>


    <div class="checkbox">
    <label>
      <input type="checkbox" class="check3 checkother3">Profile
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check3 checkother3"> Account
    </label>
  </div>

  </div><!-- End Form-group -->
  </form>

   </ul> <!-- End Sidebar Nav-->

        </div> <!-- End Tab Panel-->


  <div role="tabpanel" class="tab-pane active" id="Types3">

    <ul class="sidebar-nav3">

          <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="active" data-toggle="collapse" data-parent="#accordion3" href="#ccollapseZero"><span class="iconpad glyphicon glyphicon glyphicon-asterisk">
                            </span>Call Mez</a>
                        </h4>
                    </div><!-- End Panel-Heading -->


 <div class="panel-group" id="accordion3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="highlight" data-toggle="collapse" data-parent="#accordion3" href="#ccollapseOne"><span class="iconpad glyphicon glyphicon-user">
                            </span>Logz</a>
                        </h4>
                    </div> <!-- End Panel-Heading -->

       <div id="ccollapseOne" class="panel-collapse collapse in">
      <li>
      <a class="highlight" href="#/content">
       Loglinez
       </a>
      </li>
       </div>  <!-- End CollapseOne -->


    <div class="bottomfilter">
   <a href="#" class="filtertitle">Termz</a>    

   </div>  <!-- End Bottom Filter -->


  </div> <!-- End Panel Default in Accordion -->

   </div><!-- End Accordion -->


    </div> <!-- End Panel Default -->


   </ul> <!-- End Sidebar Nav-->


   </div> <!-- End Types 1 -->


    </div> <!-- End SideBar Wrapper 1 -->

</div> <!-- End Tab Panel -->


 <div role="tabpanel" class="tab-pane fade" id="builddesign">
 <div id="sidebar-wrapper3">

             <li class="toppy" role="tab" style="list-style:none;">
            <label data-target="#Custom4"> <span class="customtext">Choose</span>    
                <input name="intervaltype4" class="check4 checkAll4 chix" type="checkbox" />
                       </label>
        </li>


</div>                       
<div class="tab-content" id="sidebar-wrapper">


   <div role="tabpanel" class="tab-pane" id="Custom4">

    <ul class="sidebar-nav4">

     <form role="form">
  <div class="form-group">

      <div class="checkbox">
    <label>
      <input type="checkbox" class="check4 checkBelow4"> Settings
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check4 checkother4"> Log out
    </label>
  </div>


    <div class="checkbox">
    <label>
      <input type="checkbox" class="check4 checkother4">Profile
    </label>
  </div>

    <div class="checkbox">
    <label>
      <input type="checkbox" class="check4 checkother4"> Account
    </label>
  </div>

  </div><!-- End Form-group -->
  </form>

   </ul> <!-- End Sidebar Nav-->

        </div> <!-- End Tab Panel-->


  <div role="tabpanel" class="tab-pane active" id="Types4">

    <ul class="sidebar-nav4">

          <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="active highlight" data-toggle="collapse" data-parent="#accordion4" href="#dcollapseZero"><span class="iconpad glyphicon glyphicon glyphicon-asterisk">
                            </span>Call Me</a>
                        </h4>
                    </div><!-- End Panel-Heading -->



 <div class="panel-group" id="accordion4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="highlight" data-toggle="collapse" data-parent="#accordion4" href="#dcollapseOne"><span class="iconpad glyphicon glyphicon-user">
                            </span>Log</a>
                        </h4>
                    </div> <!-- End Panel-Heading -->

       <div id="dcollapseOne" class="panel-collapse collapse in">
      <li>
      <a class="highlight" href="#/content">
       Loglines
       </a>
      </li>
       </div>  <!-- End CollapseOne -->


    <div class="bottomfilter">
   <a href="#" class="filtertitle">Terms</a>    

   </div>  <!-- End Bottom Filter -->


  </div> <!-- End Panel Default in Accordion -->

   </div><!-- End Accordion -->


    </div> <!-- End Panel Default -->


   </ul> <!-- End Sidebar Nav-->


   </div> <!-- End Types 1 -->


    </div> <!-- End SideBar Wrapper 1 -->

</div> <!-- End Tab Panel -->

</div> <!-- End Tabs Content -->

CSS:

a {outline:none !important;}

html,
body,
.wrap {
  height: 100%;
}

.wrap {
  box-sizing: border-box;
}

form {
  height: 100%
}

.wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -60px;
  /* for sticky footer to not go below page */
  /* for sticky header to not overlap content */
}

.push,
.footer {
  height: 60px;
}



.footer {
  background-color: #ebebeb;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;   
}

.content {
  position: absolute;
  width: 100%;
  top: 120px;
  background-color: yellow;
  z-index: 0;
}


#sidebar-wrapper {
  z-index: 1000;
  position: fixed;
  left: 142px;
height:95%;
  width: 0; bottom:0; top:65px;
  height:auto; border-top:1px solid #fff;
  margin-left: -142px;
  overflow-y: auto; overflow-x:hidden;
  background: #eee;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#sidebar-wrapper2 {
  z-index: 1000;
  position: fixed;
  left: 142px;
  top:0; 
  margin-bottom: 0px;
  width:100%;
  min-height:55px;  height:auto; 
  margin-left: -142px;
  background: #eee; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


#sidebar-wrapper3 {
  z-index: 1000;
  position: fixed;
  left: 142px;
  top:35px; 
  margin-bottom: 0px;
  width:auto;
  min-height:55px;  height:auto; 
  margin-left: -142px;
  background: #eee; 
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.filtertitle { position:relative; display:inline-block; color:#000; width:auto; }

.topfilter { max-width:100%; min-width:100%; position:relative; display:inline-block; min-height:65px;  }

.tabber {bottom:0px !important; height:auto; left:0;  position:relative; display:inline-block; border-bottom: solid #fff 1px; }

.customtext {color:#666;}

.toppy {bottom:0px !important; text-indent:9px; }

.bottomfilter {border-top: solid #666 1px; width:100%; height:auto;  position:relative; display:block; text-align:left; background-color:#eee;  }

.checkbox {margin-left:25px !important;}

.dropdown { margin-top:15%; display:inline-block; }

.dropdown a {margin-left:20px; min-width:100% !important;  }

.caret {text-align:right !important; position:relative;}

#wrapper.toggled #sidebar-wrapper {
  width: 200px;  
}

#wrapper.toggled #sidebar-wrapper2 {
  width: 200px;  
}


#page-content-wrapper {
  width: 100%;
  position: absolute;
  padding: 15px;
}

   #wrapper.toggled #page-content-wrapper {
  position: absolute;
  margin-right: -200px;
}



@media screen and (min-width:768px) {
  #wrapper {
    padding-left: 300px;
  }
  #wrapper.toggled {
    padding-left: 0;
  }


  #wrapper.toggled #sidebar-wrapper {
    width: 0;
  }
  #page-content-wrapper {
    padding: 20px;
    position: relative;
  }
  #wrapper.toggled #page-content-wrapper {
    position: relative;
    margin-right: 0;
  }
}


@media screen and (max-width:1526px) {

  .content,
  .footer {
    width: 82%;
    right: 0; 
  }
  .header {width:82%;}

    #sidebar-wrapper {
    width: 18%; 
  }
    #sidebar-wrapper2 {
    width: 18%; 
  }

}


@media screen and (max-width:1059px) {

  .content,
  .footer {
    width: 80%;
    right: 0; 
  }

  .header {width:80%;}

    #sidebar-wrapper {
    width: 20%; 
  }

     #sidebar-wrapper2 {
    width: 20%; 
  }
}   

     @media screen and (min-width:1527px) {

  .content,
  .footer {
    width: 85%;
    right: 0; 
  }
  .header {width:85%;}
    #sidebar-wrapper {
    width: 15%; 
  }

     #sidebar-wrapper2 {
    width: 15%; 
  }


}

        @media screen and (max-width:991px) {
          .content,
  .footer {
    width: 100%;
    right: 0; 
  }

  .filtertitle {display:none;}

    #sidebar-wrapper {
    width:0;   
  }

    #sidebar-wrapper2 {
    width:0;   
  }
  .topfilter {width:0; display:none;}

.dropdown a {display:none;}



}

.iconpad { margin-right:10px; }
.panel-body { padding:0px; }
.panel-body table tr td { padding-left: 15px }
.panel-body .table {margin-bottom: 0px; }

.panel-title a:hover {color:#333; text-decoration:none;  background:none !important;}

.panel-title a:focus {color:#39f; text-decoration:none; background:none !important;}

.panel-title a {text-decoration:none; background:none !important;}







/* Service list - Top Sidebar Icon Nav */

.servicelist {  list-style:none; padding:0; }

.servicelist a{ background:none !important; text-decoration:none; color:#333;  list-style:none; }

.servicelist a :hover {  color:#bdc3c7;  }

.servicelist > li.active > a .fa-2x {
color:#f90;
   cursor: pointer;
}






/* Sidebar Styles */

.sidebar-nav {
  position: absolute;
  top: 0px;
  width:inherit; min-width:100%;  
  margin: 0;
  padding: 0;  
  list-style: none;
}

.sidebar-nav li {
  text-indent: 20px;
  line-height: 40px; 
}

.sidebar-nav li a {
  display: block; 
  text-decoration: none;
  color: #999999;
}

.sidebar-nav li a:hover {
  text-decoration: none;
  color: #666; 
  background:#bdc3c7;
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
  text-decoration: none;
}

.sidebar-nav a.active {
color:#39f;  background-color:#eee;   } 

/* Sidebar Styles 2*/

.sidebar-nav2 {
  position: absolute;
  top: 0px;
  width:inherit; min-width:100%;  
  margin: 0;
  padding: 0;  
  list-style: none;
}

.sidebar-nav2 li {
  text-indent: 20px;
  line-height: 40px; 
}

.sidebar-nav2 li a {
  display: block; 
  text-decoration: none;
  color: #999999;
}

.sidebar-nav2 li a:hover {
  text-decoration: none;
  color: #666; 
  background:#bdc3c7;
}

.sidebar-nav2 li a:active,
.sidebar-nav2 li a:focus {
  text-decoration: none;
}

.sidebar-nav2 a.active {
color:#39f; background-color:#eee;    } 


/* Sidebar Styles 3*/

.sidebar-nav3 {
  position: absolute;
  top: 0px;
  width:inherit; min-width:100%;  
  margin: 0;
  padding: 0;  
  list-style: none;
}

.sidebar-nav3 li {
  text-indent: 20px;
  line-height: 40px; 
}

.sidebar-nav3 li a {
  display: block; 
  text-decoration: none;
  color: #999999;
}

.sidebar-nav3 li a:hover {
  text-decoration: none;
  color: #666; 
  background:#bdc3c7;
}

.sidebar-nav3 li a:active,
.sidebar-nav3 li a:focus {
  text-decoration: none;
}

.sidebar-nav3 a.active {
color:#39f; background-color:#eee;     } 


/* Sidebar Styles 3*/

.sidebar-nav4 {
  position: absolute;
  top: 0px;
  width:inherit; min-width:100%;  
  margin: 0;
  padding: 0;  
  list-style: none;
}

.sidebar-nav4 li {
  text-indent: 20px;
  line-height: 40px; 
}

.sidebar-nav4 li a {
  display: block; 
  text-decoration: none;
  color: #999999;
}

.sidebar-nav4 li a:hover {
  text-decoration: none;
  color: #666; 
  background:#bdc3c7;
}

.sidebar-nav4 li a:active,
.sidebar-nav4 li a:focus {
  text-decoration: none;
}

.sidebar-nav4 a.active {
color:#39f; background-color:#eee;     }

1 个解决方案

#1

This is happening because your code is binding an event listener to each one of these links and then using $(this) to apply the active class after wiping all links of any classes. While that works on a tab-by-tab basis, it will only add that class to that specific element in that specific tab. So when the user clicks the first "Call Me" link, it's marked active and when they switch tabs, a brand new "Call Me" link is shown, but since the event listener added the class to only the item that was clicked, it doesn't have the active class added to it.

发生这种情况是因为您的代码将事件侦听器绑定到这些链接中的每一个,然后使用$(this)在擦除任何类的所有链接后应用活动类。虽然它在逐个选项卡的基础上工作,但它只会将该类添加到该特定选项卡中的特定元素。因此,当用户点击第一个“Call Me”链接时,它被标记为活动状态,当他们切换标签时,会显示一个全新的“Call Me”链接,但由于事件监听器仅将类添加到被点击的项目中,因此没有添加活动类。

You could simply apply the active class to the same elements under all other tabs, e.g., when a user clicks the first "Call Me" link, make all "Call Me" links active.

您可以简单地将活动类应用于所有其他选项卡下的相同元素,例如,当用户单击第一个“呼叫我”链接时,激活所有“呼叫我”链接。

If you actually want to remember state (which links are active, etc.) then the best route would be to store this information and perform logic based on that. Where to store it is a matter of how your page is supposed to function. If it's just short term you can simply keep it in a variable or in session storage. If it's going to be across multiple browsing sessions then you could go for local storage.

如果您确实想要记住状态(哪些链接处于活动状态等),那么最佳路径将是存储此信息并基于此执行逻辑。存储位置取决于页面的运行方式。如果它只是短期的,你可以简单地将它保存在变量或会话存储中。如果它将跨越多个浏览会话,那么您可以去本地存储。

Edit:

If I understand correctly, then it might be easier to add a callMe class to all of the "Call Me" links, and a log class to all "Log" links, then remove:

如果我理解正确,那么可能更容易将callMe类添加到所有“Call Me”链接,并将日志类添加到所有“Log”链接,然后删除:

//Selection Active       
$('.sidebar-nav a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav2 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav3 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
}); 

//Selection Active       
$('.sidebar-nav4 a').click(function() {
    $('a').removeClass();

    $(this).addClass('active');
});

and just use:

并使用:

//Selection Active       
$('.callMe').click(function() {
    $('.log').removeClass('active');

    $('.callMe').addClass('active');
}); 

//Selection Active       
$('.log').click(function() {
    $('.callMe').removeClass('active');

    $('.log').addClass('active');
});

#1