0

我正在使用以下代码：

$('.tab1-c').show();
$('.one').click(function(){
   "use strict";
    $('.tab1-c').show();
    $('.tab2-c').hide();
  $('.tab3-c').hide();
  $('.tab4-c').hide();
});

$('.two').click(function(){
	"use strict";
    $('.tab1-c').hide();
    $('.tab2-c').show();
  $('.tab3-c').hide();
  $('.tab4-c').hide();
});

$('.three').click(function(){
	"use strict";
    $('.tab1-c').hide();
    $('.tab2-c').hide();
  $('.tab3-c').show();
  $('.tab4-c').hide();
});

$('.four').click(function(){
	"use strict";
    $('.tab1-c').hide();
    $('.tab2-c').hide();
  $('.tab3-c').hide();
  $('.tab4-c').show();
});
.tab-nav-wrapper {
  max-width: auto;
  margin: 0 auto; 
  font-family: Open sans; 
  text-transform: uppercase; 
  letter-spacing: 2px;
  font-weight: bold;
  
}


.tab-content-wrapper {
  background-color:#fff;
  width: auto;
  min-height: auto;
  padding: 15px 35px 5px;
  margin: 0 auto; 
  text-align:justify;
}


.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none

}

.tab-nav-wrapper ul li {
  text-align: center;
   display: inline-block;
  width: 25%;
  margin: 0;
  text-decoration: none;
  color: #000;
}

.tab-nav-wrapper a {
  display: inline-block;
  width: 25%;
  padding: .75rem ;
  margin: 0;
  text-decoration: none;
  color: #000;
}



.fonts-content {
  font-family: droid serif;
  font-size: 15px;
  line-height: 20px;
  color: #000000 !important;
  text-indent: 50px;
}

.two {
 
}

.two:hover ~ hr {
  margin-left: 24.5%;
  background: #d48344;
}

.three {
  
}
.three:hover ~ hr {
  margin-left: 49%;
  background: #706a87;
}

.four {
 
}
.four:hover ~ hr {
  margin-left: 74%;
  background: #47435f;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: #d4bba7;
  border: none;
  transition: .3s ease-in-out;
}

h4 {
  font-size: 30px;
  font-family: Glegoo; 
  font-weight: bold; 
  margin-bottom: 15px;
  margin-top: 20px;
  line-height: 35px;
  font-color: #000 !important;
  text-align: center;
}
  <div class="tab-nav-wrapper">
  <ul>
    <li class="one">Story #1</li><!--
 --><li class="two">Story #2</li><!--
 --><li class="three">Story #3</li><!--
 --><li class="four">Story #4</li>
    <hr>
  </ul>
</div>

当我将鼠标悬停在其他类别上时，我希望每个类别下方的元素保持活动状态。单击其他类别时，我不希望它跳回到原来的位置。我希望它保留取决于我单击的类别。

请帮忙？

4

1 回答 1

0

这可以通过使用一点额外的 CSS 和 jQuery（我添加了#oneActive, #twoActive... ）来实现。此外，我稍微清理了您的 jQuery，并重写了大部分内容以使其能够积极工作。

$('.tab1-c').show();

mapping = {
  "one":"tab1-c",
  "two":"tab2-c",
  "three":"tab3-c",
  "four":"tab4-c"
};
$('.one, .two, .three, .four').click(function(){
   $('.' + mapping[$(this).attr("class")])
    .show()
      .siblings()
      .hide();
    $(this)
      .attr('id', $(this).attr("class") + "Active")
        .siblings()
        .attr("id","");
});
.tab-nav-wrapper {
  max-width: auto;
  margin: 0 auto; 
  font-family: Open sans; 
  text-transform: uppercase; 
  letter-spacing: 2px;
  font-weight: bold;
  
}


.tab-content-wrapper {
  background-color:#fff;
  width: auto;
  min-height: auto;
  padding: 15px 35px 5px;
  margin: 0 auto; 
  text-align:justify;
}


.tab1-c , .tab2-c, .tab3-c, .tab4-c{ display:none

}

.tab-nav-wrapper ul li {
  text-align: center;
   display: inline-block;
  width: 25%;
  margin: 0;
  text-decoration: none;
  color: #000;
}

.tab-nav-wrapper a {
  display: inline-block;
  width: 25%;
  padding: .75rem ;
  margin: 0;
  text-decoration: none;
  color: #000;
}



.fonts-content {
  font-family: droid serif;
  font-size: 15px;
  line-height: 20px;
  color: #000000 !important;
  text-indent: 50px;
}

.two {
 
}

.two:hover ~ hr, #twoActive ~ hr {
  margin-left: 24.5%;
  background: #d48344;
}

.three {
  
}
.three:hover ~ hr, #threeActive ~ hr {
  margin-left: 49%;
  background: #706a87;
}

.four {
 
}
.four:hover ~ hr, #fourActive ~ hr {
  margin-left: 74%;
  background: #47435f;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: #d4bba7;
  border: none;
  transition: .3s ease-in-out;
}

h4 {
  font-size: 30px;
  font-family: Glegoo; 
  font-weight: bold; 
  margin-bottom: 15px;
  margin-top: 20px;
  line-height: 35px;
  font-color: #000 !important;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-nav-wrapper">
  <ul>
    <li class="one">Story #1</li><!--
 --><li class="two">Story #2</li><!--
 --><li class="three">Story #3</li><!--
 --><li class="four">Story #4</li>
    <hr>
  </ul>
</div>
<div>
  <div class="tab1-c">test1</div>
  <div class="tab2-c">test2</div>
  <div class="tab3-c">test3</div>
  <div class="tab4-c">test4</div>
</div>

于 2017-04-08T06:36:15.557 回答