怎么用JavaScript实现tab切换
Posted 采姑娘的小乌龟
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么用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切换的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript跳转到指定页面并且到指定的tab切换窗口