Discuz!X3.1选项卡的制作

作者: 鲁智深 分类: Discuz!X 发布时间: 2014-08-26 00:03

选项卡由两部分组成,一部分是切换,另部分是切换的内容切换部分:

1
2
3
4
<ul>
<li  id=“indexbox_1” class=“on” onmousemove=“switchTab(‘indexbox’,1,2,‘on’);>标题1</li>
<li  id=“indexbox_2” onmousemove=“switchTab(‘indexbox’,2,2,‘on’);>标题2</li>
</ul>

其中onmousemove是鼠标划过的事件,可以改成onclick鼠标点击事件。

内容部分:

1
2
3
4
<div class="zbang_usertu">
<div  id="indexbox_c_1" style="display:block;">内容区1</div>
<div  id=“indexbox_c_2” style=“display:none”>内容区2</div>
</div>

注:当有多个选项卡时,只需把indexbox_1、 indexbox_c_2名字改了,如: indexboxaa_1、 indexboxaa_c_2

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注