簡單的方法之間切換內容與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

回答

相關問題