javascript - 使用 jquery 在内容之间切换的简单方法

Question

我刚刚制作了一个脚本，当您单击内容上方的选项卡时，它会使用 Jquery 显示/隐藏内容(它还会更改被单击选项卡的颜色)。一切正常(结果:https://jsfiddle.net/e572s3oq/embedded/result/)但我认为还有另一种在内容之间切换的方法，可以更轻松地添加更多选项卡。如果有人能帮助我，我会很高兴。我希望你明白我的意图。 (请原谅我的英语，如果您还有其他问题，请问我)

这是我的代码(我认为只有 jQuery 代码是相关的):

    $(document).ready(function() {
  $(".tab:first-child").click(function() {
    $(".content p:nth-child(2)").css('display', 'none');
    $(".tab:nth-child(2)").css('background-color', '#F5F7F7');
    $(".tab:first-child").css('background-color', 'white');
    $(".content p:first-child").css('display', 'block');
  });

  $(".tab:nth-child(2)").click(function() {
    $(".content p:first-child").css('display', 'none');
    $(".tab:first-child").css('background-color', '#F5F7F7');
    $(".tab:nth-child(2)").css('background-color', 'white');
    $(".content p:nth-child(2)").css('display', 'block');
  });

});

body,
html {
  padding: 0;
  margin: 0;
  background-color: #ecf0f1;
}
#wrapper {
  width: 260px;
  margin: auto;
  margin-top: 100px;
}
.tab {
  width: 130px;
  height: 30px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  color: #7f8c8d;
  display: block;
  float: left;
}
.tab:hover {
  cursor: pointer;
}
.tab:first-child {
  background-color: white;
}
.tab:nth-child(2) {
  background-color: #F5F7F7;
}
.content {
  width: 260px;
  height: 300px;
  background-color: white;
  overflow: scroll;
}
.content p {
  color: #7f8c8d;
  font-size: 12px;
  font-family: 'Lato', sans-serif;
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 5px;
}
.content p:first-child {
  display: block;
}
.content p:nth-child(2) {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=wrapper>
  <div class="tab">
    PAGE 1
  </div>

  <div class="tab">
    PAGE 2
  </div>

  <div class="content">
    <p>Content1</p>
    <p>Content2</p>
  </div>
</div>

Answer 1

应该这样做:

$('.tab').click(function() {
    $('.content p').hide();
    $('.tab').css('background-color', '#F5F7F7');
    $(this).css('background-color', 'white');
    $('.content p').eq($(this).index()).css('display', 'block');
});

基本上发生的事情是:

• 我们首先默认隐藏 .content div 中的所有 p 元素。
• 我们还将所有 .tab 元素的 background-color 设置为 #F5F7F7。
• 然后，您可以使用 $(this) 定位当前 .tab 元素并将其 background-color 设置为 白色。
• 最后，我们可以使用当前的 .index() 定位 .content div 中的特定 p 元素。 当前 .tab 元素，然后我们将此 .index() 提供给另一个名为 .eq() 的 jQuery 方法。 然后为我们提供所需的 p 元素。

片段:

$('.tab').click(function() {
    $('.content p').hide();
    $('.tab').css('background-color', '#F5F7F7');
    $(this).css('background-color', 'white');
    $('.content p').eq($(this).index()).css('display', 'block');
});

body, html {
    padding:0;
    margin:0;
    background-color:#ecf0f1;
}
#wrapper {
    width:260px;
    margin: auto;
    margin-top:100px;
}
.tab {
    width:84px;
    height:30px;
    font-family:'Lato', sans-serif;
    font-size:14px;
    line-height: 30px;
    text-align: center;
    color:#7f8c8d;
    display: block;
    float: left;
    background-color: #F5F7F7;
}
.tab:hover { cursor:pointer; }
.tab:first-child { background-color: white; }
.content {
    width:260px;
    height:300px;
    background-color:white;
    overflow: scroll;
}
.content p {
    color:#7f8c8d;
    font-size: 12px;
    font-family:'Lato', sans-serif;
    margin-top:8px;
    margin-left:8px;
    margin-right:8px;
    margin-bottom:5px;
}
.content p:first-child {
    display:block;
}
.content p:nth-child(2) {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id=wrapper>
    <div class="tab">PAGE 1</div>
    <div class="tab">PAGE 2</div>
    <div class="tab">PAGE 3</div>
    <div class="content">
        <p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
        <p>Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel Id graece similique sea, ex duo dico dicam indoctum, nam animal tritani adversarium in. Eu mea veniam nonumes sententiae, ius iudico moderatius cu. Vidisse pericula suavitate vim ne, dicam neglegentur ei ius, ne illud viderer feugait his. Sit modus adolescens in, duo te amet suavitate tincidunt. Soleat signiferumque te per, no eos debet singulis neglegentur, cu vis natum falli expetendis. Vix tollit dicunt mediocrem eu, mei et equidem civibus. Eum dicat efficiantur definitionem ne. Ei mei wisi vidisse appetere. An sit nominavi lobortis, liber legimus epicuri sea an. Ne habeo ludus expetendis sit, ne posse tantas voluptaria nec, id elit volumus quaestio pro. Interpretaris conclusionemque ea eum, tollit insolens no mel.</p>
        <p>Lorem ipsum dolor sit amet, ne lorem dolorem eos. His ex verear tincidunt, ea causae nominavi voluptua ius. Sit ne nibh qqqqqqdeserunt petentium, nam nisl volumus tincidunt ne. Ut vel dictas posidonium sadipscing, nominavi comprehensam duo no. Et quis prima exerci pro, idque ignota fastidii vel cu, id eum solet mollis definitionem. Habeo dolore postulant te pri, duo ut electram incorrupte, ea melius omittantur vel. Alii graeco bonorum pri et. Aliquip similique cum at. Ad per perfecto expetendis mediocritatem, pro percipitur ullamcorper complectitur ex. His falli aeque fierent cu, reque philosophia mel ex. Ad eum dicat platonem voluptatibus, eu vim alia adhuc justo, minimum consequuntur usu ex. Eos dolorem maiorum scaevola no, aliquid verterem ut per. Mea et feugiat vivendum, id graece iriure mel. Nihil debitis necessitatibus et nec. Ut has mazim option mandamus. Veri adipisci eloquentiam eos ea, soleat dissentiunt te mel, vel at debitis recteque petentium.</p>
    </div>
</div>

在 CSS 中修改了一些样式，并在 HTML 中为上述代码段添加了更多内容。希望这会有所帮助。