怎麽用JavaScript實現tab切換
先看一下代碼實現後的最終效果：
用JavaScript實現思路很簡單，就是先把所有的內容隱藏，點擊標題對應的內容顯示，
css代碼如下：
<style type="text/css">
#ltab {
clear: both;
/*清除全部浮動樣式*/
}
#ltab_1 {
display: none;
}
#ltab_2 {
display: none;
}
#ltab_3 {
display: none;
}
</style>
html內容區域：
<body>
/標題區域/
<div class="home__tab___4BeRq">
<ul>
<li id="tabc_0" class="home__active___1gdd2" onclick="changeTab(‘0‘)">
<span class="home__tab-text___2P3Ej">最新資訊</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_1" onclick="changeTab(‘1‘)">
<span class="home__tab-text___2P3Ej">牛人動態</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_2" onclick="changeTab(‘2‘)">
<span class="home__tab-text___2P3Ej">股神排行</span><span class="home__line___12SrG"></span>
</li>
<li id="tabc_3" onclick="changeTab(‘3‘)">
<span class="home__tab-text___2P3Ej">大師策略</span><span class="home__line___12SrG"></span>
</li>
</ul>
</div>
/內容區域/
<div id="ltab">
<div id="ltab_0">
具體內容太繁瑣，以簡單文字代替
</div>
<div id="ltab_1">
具體內容太繁瑣，以簡單文字代替
</div>
<div id="ltab_2">
具體內容太繁瑣，以簡單文字代替
</div>
<div id="ltab_3">
具體內容太繁瑣，以簡單文字代替
</div>
</div>
</body>
js代碼如下：
function changeTab(ltab_num) {
for(i = 0; i <= 3; i++) {
document.getElementById("tabc_" + i).className="" //隱藏所有的標題樣式
document.getElementById("ltab_" + i).style.display = "none"; //將所有的層都隱藏
}
document.getElementById("tabc_"+ltab_num).className="home__active___1gdd2";//令當前選中狀態的標題的class=“home__active___1gdd2”
document.getElementById("ltab_" + ltab_num).style.display = "block"; //顯示當前層
}
相關參考網址：
http://www.jb51.net/article/74395.htm
怎麽用JavaScript實現tab切換