求助，选项卡如何实现分两栏（行）？ -

jiloveyou100 - 2014/5/21 11:48:15

想要实现选项卡分两栏（行），如下图一：
6873

下面这段代码该如何修改：

</script>
<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;}
.tabcontentstyle dd{border:1px solid #cccccc;padding:10px;display:none;}
</style>

<dl id="tabhead"  class="tabheadstyle">
<dd>政务公开1</dd>
<dd>政务公开2</dd>
<dd>办事服务3</dd>
<dd>工作动态4</dd>
</dl>
<dl id="tabcontent"  class="tabcontentstyle">
<dd>{pa:model}1,132,509,,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,132,316,,,_self,5,50,150,150{/pa:model}</dd>
<dd>内容3</dd>
<dd>内容4</dd>
</dl>
<script type="text/javascript">
tabs("tabhead","tabcontent","onmouseover");
</script>

<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;}
.tabcontentstyle dd{border:1px solid #cccccc;padding:10px;display:none;}
</style>

<dl id="tabhead"  class="tabheadstyle">
<dd>活动交流</dd>
<dd>办事服务</dd>
<dd>工作动态</dd>
</dl>
<dl id="tabcontent"  class="tabcontentstyle">
<dd>{pa:model}1,132,425,,,_self,5,50,150,150{/pa:model}</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<script type="text/javascript">
tabs("tabhead","tabcontent","onmouseover");
</script>


调试效果图二：
6874

第二行效果图三（没反应，其边框也没显示出来）
6875

请教如何修改上面代码，达到实现图一效果（分两行,显示）。谢谢！~~

xiyou - 2014/5/21 16:39:56

id="tabhead" 和id="tabcontent"重复了，一个页面不能出现两个相同的id，如果多个选项卡，重新命名id保证唯一性
比如第二个选项卡代码里面的id="tabhead" 和id="tabcontent"分别改为id="tabhead_1" 和id="tabcontent_1"
<script type="text/javascript">
tabs("tabhead_1","tabcontent_1","onmouseover");
</script>
这里id也同步更换

jiloveyou100 - 2014/5/21 20:28:53

[b]回复 [url=http://bbs.pageadmin.net/showtopic-28829.aspx#110832]2楼[color=Olive]xiyou[/color]的帖子[/url][/b]

          首先非常感谢xiyou百忙中抽时间两次回到我的这个问题。
           测试地址：[url]http://w156383.s22.chinaccnet.cn/[/url]
         按您的方法进行了修改，打开第二栏目能显示出来，如果下图一
       6880

但当鼠标移动到选项卡第二栏目框社发科技1这一行，就自动收缩，再也打不开。而且第二栏目鼠标滑过也没反应。

6882

     按您的方法修改如下：

</script>
<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>

<dl id="tabhead"  class="tabheadstyle">
<dd>政策法规1</dd>
<dd>科技计划2</dd>
<dd>科技条件3</dd>
<dd>高新技术5</dd>
<dd>农村科技6</dd>
<dd>农村科技7</dd>
</dl>
<dl id="tabcontent"  class="tabcontentstyle">
<dd>{pa:model}1,132,316,,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,132,509,,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,132,414,,,_self,5,50,150,150{/pa:model}</dd>
<dd>内容5</dd>
<dd>内容6</dd>
<dd>内容7</dd>
</dl>
<script type="text/javascript">
tabs("tabhead","tabcontent","onmouseover");
//tabs方法的简化调用（3个必填参数），前两个参数分别为标题和内容区的id，第三个参数可选onmouseover或onclick
//完整参数调用写法（6个参数）： tabs("tabhead","tabcontent","dd","dd","current","onmouseover")
</script>

<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>

<dl id="tabhead_1"  class="tabheadstyle">
<dd>社发科技1</dd>
<dd>科技成果2</dd>
<dd>科技人才3</dd>
<dd>实验动物4</dd>
<dd>科技奖励5</dd>
<dd>自科基金6</dd>
</dl>
<dl id="tabcontent_1"  class="tabcontentstyle">
<dd>{pa:model}1,132,323,,,_self,5,50,150,150{/pa:model}</dd>
<dd>{pa:model}1,132,425,,,_self,5,50,150,150{/pa:model}</dd>
<dd>内容3</dd>
</dl>
<script type="text/javascript">
tabs("tabhead_1","tabcontent_1","onmouseover");
//tabs方法的简化调用（3个必填参数），前两个参数分别为标题和内容区的id，第三个参数可选onmouseover或onclick
//完整参数调用写法（6个参数）： tabs("tabhead_1","tabcontent_1","dd","dd","current","onmouseover")
</script>

jhez - 2014/5/22 9:27:38

这个代码很实用,以后可以拿来学习下.

jiloveyou100 - 2014/5/22 14:48:18

按您的方法，调试到，第二栏能显示了，但不能实现滑动鼠标切换，需要点击才能切换。http://w156383.s22.chinaccnet.cn/

xiyou - 2014/5/22 14:51:07

tabs("tabhead_1","tabcontent_1","onclick");
onclick改为onmouseover

jiloveyou100 - 2014/5/22 15:02:55

非常感谢，问题解决

yb770905 - 2015/4/21 23:32:58

好贴留名

glxxjyf - 2015/4/22 6:42:28

实用,好好学习.

jsxubin - 2015/4/23 19:14:09

实用,好好学习.:D

oxtime - 2015/7/26 23:09:00

这些代码是写到哪个文件下面的，我用了一个模板有调用，但是标题我想自己改，但是找不到文件在哪里

一颗小白菜 - 2016/4/7 11:03:14

好东西

丢失的蓝色 - 2016/6/21 10:59:45

好东西，收藏下！~！~

产品使用及交流论坛