急！急！急！求选项卡效果制作 - - Powered by Discuz!NT Archiver

leeboly - 2015/5/21 15:05:47

选择政府模板8，想制作一个选项卡，采用如下代码，就是出不来，请高手指点


<div class="left" style="width:400px">
<div class="tab" style="height:240px">
<dl class="tabheader" id="tabheader">
<dd><a href=/index.aspx?lanmuid=63&sublanmuid=696>党团建设</a></dd>
<dd><a href=/index.aspx?lanmuid=63&sublanmuid=637>团请关注</a></dd>

</dl>
<dl class="tabcontent" id="tabcontent">
<dd>{pa:model}1,43,688,,0,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,43,600,,0,,_self,5,50,150,150{/pa:model}</dd>
</dl>
</div>
</div>
<script type="text/javascript">
tabs("tabheader","tabcontent","onmouseover")
</script>
显示效果

9172

xiyou - 2015/5/21 15:40:49

那是因为你没有写样式文件
参考：http://bbs.pageadmin.net/showtopic-23012.aspx

leeboly - 2015/5/21 16:04:11

xiyou老大，我现在把代码改成如下了，还是老样子，我该怎么办?
<style type="text/css">
.tabheadstyle{clear:both;height:20px;overflow:hidden;}
.tabheadstyle dd{float:left;width:100px;height:20px;border:1px solid #cccccc;text-align:center;margin-right:5px}
.tabheadstyle dd.current{background-color:#eeeeee;} /* 当前选项卡标题样式，默认名：current */
.tabcontentstyle dd{border:1px solid #cccccc;padding:10px;display:none;}
</style>


<div class="left" style="width:400px">
<div class="tab" style="height:240px">
<dl class="tabheader" id="tabheader">
<dd><a href=/index.aspx?lanmuid=63&sublanmuid=696>党团建设</a></dd>
<dd><a href=/index.aspx?lanmuid=63&sublanmuid=637>团请关注</a></dd>

</dl>
<dl class="tabcontent" id="tabcontent">
<dd>{pa:model}1,43,688,,0,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,43,600,,0,,_self,5,50,150,150{/pa:model}</dd>
</dl>
</div>
</div>
<script type="text/javascript">
tabs("tabheader","tabcontent","onmouseover")
</script>

lestr - 2015/5/21 16:55:33

注意ID，这个是你页面中唯一的值。
如果你同一个页面内有多个选项卡，一定注意ID不能重复，重复了就显示不正常了。。

lestr - 2015/5/21 16:57:46

id值是唯一的。。
也就是说同一个页面内有多个tab选项卡的话，
每个选项卡的id应不同。
<dl class="tabheader" id="tabheader">
<dl class="tabcontent" id="tabcontent">
就是这里的id值。

scstjcy - 2015/5/21 17:07:20

他这个哪里是 ID 的问题哟，是因为照抄照搬css样式的问题。你把样式那段里面所有的 .tabheadstyle 改成 .tabhead，把所有的 .tabcontentstyle 改成 .tabcontent 吧。

产品使用及交流论坛