ChosenJuan ChosenJuan - 3 months ago 12
CSS Question

Simultaneously change the active state of 2 different set of Navigation Links

I created a left navigation menu with 4 navigation links that control the 4 tabs, and in the body I copied and pasted the same 4 navigation links.

http://fiddle.jshell.net/bym04h3p/1/
STRETCH SCREEN TO 769 WIDTH TO VIEW LEFT MENU


Now when I click on the navigation links either in the body or in the
left navigation menu: all the tabs change, but for some reason the active
state of the navigation links don't change.


enter image description here

How can I make the navigation links simultaneously change color on active state when I click either set of links?

JS:

//Selection Active
$('.servicelist a').click(function() {
$('a').removeClass();

$(this).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">
<br />
<br />
<h2>Default</h2>

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

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

<br />
<br />
<h2>Tab 2</h2>

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



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


<br />
<br />
<h2>Tab 3</h2>

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


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


<br />
<br />
<h2>Tab 4</h2>

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

</div> <!-- End Tabs Content -->
<div style="float:right;">
<!-- 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>
</div>


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;
}

.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; text-indent:9px; }

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

.customtext {color:#666;}

.toppy {bottom:0px !important; }

.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;
}


/* 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 > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}

@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;}

.sidebar-nav a:hover {
color: #666;
}

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


}

Answer

You can use the shown.bs.tab event instead of the click event:

$( '.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' );
  }
});

Please check the result: http://fiddle.jshell.net/glebkema/7Lto4j5a/