[JS练习题]请用JS写个TAB切换代码
<style>dddl{display:none}dddl.focus{display:block}</style><dtid="tabs"><aonclick="tab...
<style>
dd dl{display:none}
dd dl.focus{display:block}
</style>
<dt id="tabs">
<a onclick="tab('tabbox_1',this)" >tab1</a>
<a onclick="tab('tabbox_2',this)" >tab2</a>
<a onclick="tab('tabbox_3',this)" >tab3</a>
</dt>
<dd class="tabshow">
<dl class="tabbox_1 focus">1</dl>
<dl class="tabbox_2">2</dl>
<dl class="tabbox_3">3</dl>
</dd>
以上是布局,直接写JS就可以。
对了,还要让 当前 的 a 标签,可以控制样式,麻烦,补充下CSS 展开
dd dl{display:none}
dd dl.focus{display:block}
</style>
<dt id="tabs">
<a onclick="tab('tabbox_1',this)" >tab1</a>
<a onclick="tab('tabbox_2',this)" >tab2</a>
<a onclick="tab('tabbox_3',this)" >tab3</a>
</dt>
<dd class="tabshow">
<dl class="tabbox_1 focus">1</dl>
<dl class="tabbox_2">2</dl>
<dl class="tabbox_3">3</dl>
</dd>
以上是布局,直接写JS就可以。
对了,还要让 当前 的 a 标签,可以控制样式,麻烦,补充下CSS 展开
展开全部
<style>
a:link {color:blue;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点携拆击的链接 */
</style>
<body>
<dt id="tabs">
<a href="#" onclick="tab('tabbox_1')" >tab1</a>
<a href="#" onclick="tab('tabbox_2')" >tab2</a>
<a href="#" onclick="tab('tabbox_3')" >tab3</a>
</dt>
<dd class="tabshow">
<dl class="咐核tabbox_1 normal" style="display:none;">1</dl>衡隐掘
<dl class="tabbox_2 normal" style="display:none;">2</dl>
<dl class="tabbox_3 normal" style="display:none;">3</dl>
</dd>
<script type="text/javascript">
function tab(param){
$(".normal").hide();
$("."+param).show();
}
</script>
希望对你有所帮助
更多追问追答
追问
代码用不了,你测试下。
追答
那是我测试过的! -_-# 你是不是没导JQuery包啊!还有HTML代码里在拷贝时忘了<body>的结束表签,你加上就好了!导JQuery包的代码:
<head>
<!-- js调用 -->
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
注意你的路径是哪,src就写那个!
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询