javascript - 导航jQuery

我有这个代码：

$('.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"); // get 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"); // get 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 a {
	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>

它几乎可以工作，但是这是我的问题...：当您单击“ Voluls roulants”类别中的随机链接时，然后转到名为“ Porte de garage”的主链接。最后，转到主链接“ Voluls roulants”，您会看到两个链接都被加了上划线。

我尝试解决此问题，但不起作用。

谢谢你的帮助 ！

最佳答案

当您第一次在“ Voluls roulants”下选择一个子项目时，该子项目被赋予active类。

当您返回该类别时，它将在active子项目上设置a:first-child，但绝不会删除以前可能已设置过的active类。

添加：

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

之前

$('.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"); // get 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"); // get 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 a {
  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>