javascript - Navigation jQuery -

i have code :

$('.category').hide();  	 $('.category').first().show();    	$('.inline-title a').first().addclass('active');      	 $('.category .inline-subtitles a:first-child').addclass('active');    	 //category  	 $(".inline-title a[data-toggle]").on("click", function (e) {  	    e.preventdefault(); // prevent navigating  	    var selector = $(this).data("toggle"); // corresponding element  	    $(".category").hide();  	    $("."+selector).show();  	    $('.category .inline-subtitles a:first-child').addclass('active');          $(".inline-title .active").removeclass('active');          $(this).addclass('active');  	});    	 $('.document').hide();  	 $('.documents-75 .document').first().show();  	 $('.documents-76 .document').first().show();    	 $('category:first-child .documents document').first().show();  	 $('category:nth-child(n+2) .documents document').first().show();    	 //subcategory  	 $(".inline-subtitles a[data-toggle]").on("click", function (e) {  	    e.preventdefault(); // prevent navigating  	    var selector = $(this).data("toggle"); // corresponding element  	    $(".document").hide();  	    $("."+selector).show();  	    $('.category .inline-subtitles a:first-child').removeclass('active');          $(".inline-subtitles .active").removeclass('active');          $(this).addclass('active');  	});

.bloc-documentation {  	margin-top: 30px;  }    .inline-title,  .inline-subtitles {  	display: table;  	width: 100%;  	padding-bottom: 10px;      	border-top: 1px solid #d0d0d0;  }    .inline-title a,  .inline-subtitles {  	display: table-cell;  	float: left;  	margin-right: 25px;  	padding-top: 5px;    	color: #192f3c;  	font-size: 16px;  	font-weight: 300;  	  	text-decoration: none;  	border-top: 2px solid transparent;    	-webkit-transition: color .2s ease-out;  	-o-transition: color .2s ease-out;  	transition: color .2s ease-out;  }    .inline-title .active,  .inline-subtitles .active {  	border-top: 2px solid #9dad3e;  }    .inline-title a:hover {  	color: #9dad3e;  }      .inline-title:after {  	clear:both;  	content:'';  	display: table;  }    .active {  	display: inline-block !important;  }      .category:first-child {  	padding-top: 0;  }    .category {  	padding-bottom: 15px;  	padding-top: 15px;  }    .category h3 {  	padding-bottom: 20px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="bloc-documentation">  <div class="inline-title">      <a href="#" data-toggle="cat-75">volets roulants</a>      <a href="#" data-toggle="cat-76">porte de garage</a>  </div>  <div class="category cat-75">      <div class="inline-subtitles">          <a href="#" data-toggle="wpcf-doc-technique">doc technique</a>          <a href="#" data-toggle="wpcf-carnet-utilisateur">carnet utilisateur</a>          <a href="#" data-toggle="wpcf-notice-de-pose">notice de pose</a>          <a href="#" data-toggle="wpcf-notice-reglages">notice reglages</a>          <a href="#" data-toggle="wpcf-nomenclatures">nomenclatures</a>      </div>  </div>  <div class="category cat-76">      <div class="inline-subtitles">          <a href="#" data-toggle="wpcf-doc-technique" class="active">doc technique</a>          <a href="#" data-toggle="wpcf-carnet-utilisateur">carnet utilisateur</a>          <a href="#" data-toggle="wpcf-notice-de-pose">notice de pose</a>          <a href="#" data-toggle="wpcf-notice-reglages">notice reglages</a>          <a href="#" data-toggle="wpcf-nomenclatures">nomenclatures</a>      </div>  </div>  </div>

it work, here's problem ... : when click on random link in category "volets roulants", go main link called "porte de garage". go main link "volets roulants" , you'll see 2 links overlined.

i try fix issue not work.

thanks !

when first chose sub-item under "volets roulants", sub-item given active class.

when return category, sets active on a:first-child sub-item, never removes active class may have been set before.

add this:

$('.category .inline-subtitles a').removeclass('active'); 

before

$('.category .inline-subtitles a:first-child').addclass('active'); 

$('.category').hide();  $('.category').first().show();    $('.inline-title a').first().addclass('active');      $('.category .inline-subtitles a:first-child').addclass('active');    //category  $(".inline-title a[data-toggle]").on("click", function(e) {    e.preventdefault(); // prevent navigating    var selector = $(this).data("toggle"); // corresponding element    $(".category").hide();    $("." + selector).show();    $('.category .inline-subtitles a').removeclass('active');    $('.category .inline-subtitles a:first-child').addclass('active');    $(".inline-title .active").removeclass('active');    $(this).addclass('active');  });    $('.document').hide();  $('.documents-75 .document').first().show();  $('.documents-76 .document').first().show();    $('category:first-child .documents document').first().show();  $('category:nth-child(n+2) .documents document').first().show();    //subcategory  $(".inline-subtitles a[data-toggle]").on("click", function(e) {    e.preventdefault(); // prevent navigating    var selector = $(this).data("toggle"); // corresponding element    $(".document").hide();    $("." + selector).show();    $('.category .inline-subtitles a:first-child').removeclass('active');    $(".inline-subtitles .active").removeclass('active');    $(this).addclass('active');  });

.bloc-documentation {    margin-top: 30px;  }  .inline-title,  .inline-subtitles {    display: table;    width: 100%;    padding-bottom: 10px;    border-top: 1px solid #d0d0d0;  }  .inline-title a,  .inline-subtitles {    display: table-cell;    float: left;    margin-right: 25px;    padding-top: 5px;    color: #192f3c;    font-size: 16px;    font-weight: 300;    text-decoration: none;    border-top: 2px solid transparent;    -webkit-transition: color .2s ease-out;    -o-transition: color .2s ease-out;    transition: color .2s ease-out;  }  .inline-title .active,  .inline-subtitles .active {    border-top: 2px solid #9dad3e;  }  .inline-title a:hover {    color: #9dad3e;  }  .inline-title:after {    clear: both;    content: '';    display: table;  }  .active {    display: inline-block !important;  }  .category:first-child {    padding-top: 0;  }  .category {    padding-bottom: 15px;    padding-top: 15px;  }  .category h3 {    padding-bottom: 20px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div class="bloc-documentation">    <div class="inline-title">      <a href="#" data-toggle="cat-75">volets roulants</a>      <a href="#" data-toggle="cat-76">porte de garage</a>    </div>    <div class="category cat-75">      <div class="inline-subtitles">        <a href="#" data-toggle="wpcf-doc-technique">doc technique</a>        <a href="#" data-toggle="wpcf-carnet-utilisateur">carnet utilisateur</a>        <a href="#" data-toggle="wpcf-notice-de-pose">notice de pose</a>        <a href="#" data-toggle="wpcf-notice-reglages">notice reglages</a>        <a href="#" data-toggle="wpcf-nomenclatures">nomenclatures</a>      </div>    </div>    <div class="category cat-76">      <div class="inline-subtitles">        <a href="#" data-toggle="wpcf-doc-technique" class="active">doc technique</a>        <a href="#" data-toggle="wpcf-carnet-utilisateur">carnet utilisateur</a>        <a href="#" data-toggle="wpcf-notice-de-pose">notice de pose</a>        <a href="#" data-toggle="wpcf-notice-reglages">notice reglages</a>        <a href="#" data-toggle="wpcf-nomenclatures">nomenclatures</a>      </div>    </div>  </div>