产品使用及交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

求助,选项卡如何实现分两栏(行)? [复制链接]

1#
          想要实现选项卡分两栏(行),如下图一:


       下面这段代码该如何修改:
<!--专项工作栏目开始-->
</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-coloreeeeee;}
.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>{paodel}1,132,509,,,_self,5,50,150,150{/paodel}</dd>
<dd>{paodel}1,132,316,,,_self,5,50,150,150{/paodel}</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-coloreeeeee;}
.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>{paodel}1,132,425,,,_self,5,50,150,150{/paodel}</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<script type="text/javascript">
tabs("tabhead","tabcontent","onmouseover");
</script>

<!--end of 专项工作栏目t-->
调试效果图二:

第二行效果图三(没反应,其边框也没显示出来)

      请教如何修改上面代码,达到实现图一效果(分两行,显示)。谢谢!~~
分享 转发
TOP
2#

[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]
         按您的方法进行了修改,打开第二栏目能显示出来,如果下图一
      
          但当鼠标移动到 选项卡第二栏目框社发科技1这一行,就自动收缩,再也打不开。而且第二栏目鼠标滑过也没反应。



     按您的方法修改如下:

</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-coloreeeeee;} /* 当前选项卡标题样式,默认名: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>{paodel}1,132,316,,,_self,5,50,150,150{/paodel}</dd>
<dd>{paodel}1,132,509,,,_self,5,50,150,150{/paodel}</dd>
<dd>{paodel}1,132,414,,,_self,5,50,150,150{/paodel}</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-coloreeeeee;} /* 当前选项卡标题样式,默认名: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>{paodel}1,132,323,,,_self,5,50,150,150{/paodel}</dd>
<dd>{paodel}1,132,425,,,_self,5,50,150,150{/paodel}</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>
TOP
3#

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

非常感谢,问题解决
TOP
发新话题 回复该主题