简单的方法之间切换内容与jQuery

我刚刚做了一个脚本，显示/隐藏内容与JQuery当你点击内容上方的标签（它也改变了被点击的标签的颜色）。一切工作正常（结果：https://jsfiddle.net/e572s3oq/embedded/result/），但我认为有另一种方式之间切换的内容，可以更容易地添加更多的标签。如果有人能帮助我，我会很高兴。我希望你能理解我的意图。（请原谅我的英语问我，如果您有任何遗留问题）简单的方法之间切换内容与jQuery

这里是我的代码（我认为只有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>

来源

2015-08-15 Peter

这应该做：

$('.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设置为white。
最后，我们可以通过使用当前.tab元件的电流.index()靶向内.content DIV特定p元件，然后我们馈送这个.index() jQuery的的另一种方法称为.eq()然后得到我们所期望的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更多的内容。希望这可以帮助。

来源

2015-08-15 09:15:37

很高兴帮助:) –

简单的方法之间切换内容与jQuery

回答

相关问题