以该文为例
html+css实现选项卡功能 - JarvisLau - 博客园
其中实现选项卡切换的代码是
function Tab(num)
{
var i;
for(i=1;i<=4;i++)
{
if(i==num)
document.getElementById("d"+i).style.display="block";
else
document.getElementById("d"+i).style.display="none";
//none means do not display
}
}
基本思路
1.先给每个导航li与其对应内容设置id。比如li 设置id L1 。对应内容 id设为d1。
2给每个li元素绑定函数，然后在js中定义循环。
<li id="L1" onclick="Tab(1)"><a href="#">唐诗</a></li>
3，隐藏元素利用display：none的属性。
