网页选项卡功能

来源：互联网发布：东方飞扬档案软件编辑：程序博客网时间：2024/05/06 19:31

多点调用

<html><head><mce:style></mce:style><style mce_bogus="1">body{ text-align:center;}.tab{ width:432px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc;}.menu,.menu li{ margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center;}.menu{ border-bottom:1px solid #cccccc;}.menu .default{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('http://www.webjx.com/upfiles/20070905/20070905212648_01.jpg') no-repeat;}.menu .active{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('http://www.webjx.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;}#more{ width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#FF0000; font-weight:normal; text-align:right}.con{ width:422px; height:184px; margin:0 auto;}</style><head><body><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class='default'>第5新闻</li> </ul> <div class='con' id='con1'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div1_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div1_l5"> <span>增加了！</span> </div></div><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" mce_href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div></div><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="more" style="width:160px"><a href="#" mce_href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div></div><mce:script type="text/javascript"></mce:script></body></html>

多点调用—可伸缩

<html><head><mce:style></mce:style><style mce_bogus="1">body{ text-align:center;}.tab{ width:422px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc;}.menu,.menu li{ margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center;}.menu{ border-bottom:1px solid #cccccc;}.menu .default{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('http://www.webjx.com/upfiles/20070905/20070905212648_01.jpg') no-repeat;}.menu .active{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('http://www.webjx.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;}.menu .showme,.menu .hidme{ width:76px; float:left; font-size:14pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#0000FF; text-align:right; font-weight:bold;}.con{ width:422px; height:184px; margin:0 auto;}</style><head><body><mce:script type="text/javascript"></mce:script><div id='tab1' class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="hid1" class="showme"style="width:160px" onclick="show_con('tab1','nav1','hid1')">-</li> </ul> <div class='con' id='con1'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div></div><mce:script type="text/javascript"></mce:script><div id='tab2' class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="hid2" class="showme" onclick="show_con('tab2','nav2','hid2')">-</li> </ul> <div class='con' id='con2'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div></div><mce:script type="text/javascript"></mce:script><div id='tab3' class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="hid3" class="showme" onclick="show_con('tab3','nav3','hid3')">-</li> </ul> <div class='con' id='con3'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div3_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div></div><mce:script type="text/javascript"></mce:script></body></html>

多点调用—折叠

<html><head><mce:style></mce:style><style mce_bogus="1">body{ text-align:center;}.tab{ width:432px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc;}.menu,.menu li{ margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center;}.menu{ border-bottom:1px solid #cccccc;}.menu .default{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('http://www.webjx.com/upfiles/20070905/20070905212648_01.jpg') no-repeat;}.menu .active{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('http://www.webjx.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;}.menu .showme,.menu .hidme{ width:76px; float:left; font-size:14pt; line-height:1.5; margin-left:1px; cursor:pointer; color:#0000FF; text-align:right; font-weight:bold}.con{ width:422px; height:0px; margin:0 auto;}.tab0{ height:208}</style><head><body><mce:script type="text/javascript"></mce:script><div class="tab0"><div id='tab1' class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> </ul> <div class='con' id='con1'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div></div><mce:script type="text/javascript"></mce:script><div id='tab2' class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class="default">第5新闻</li> </ul> <div class='con' id='con2'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div2_l5"> <span>增加了！</span> </div></div><mce:script type="text/javascript"></mce:script><div id='tab3' class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> </ul> <div class='con' id='con3'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div3_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div></div></div><mce:script type="text/javascript"></mce:script><mce:script type="text/javascript"></mce:script></body></html>

多点调用_各自循环

<html><head><mce:style></mce:style><style mce_bogus="1">body{ text-align:center;}.tab{ width:432px; height:208px; margin:0 auto; overflow:hidden; border:1px solid #cccccc;}.menu,.menu li{ margin:0; padding:0; height:24px; list-style:none; overflow:hidden; text-align:center;}.menu{ border-bottom:1px solid #cccccc;}.menu .default{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('http://www.webjx.com/upfiles/20070905/20070905212648_01.jpg') no-repeat;}.menu .active{ width:84px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; font-weight:bold; color:#FFFFFF; background:url('http://www.webjx.com/upfiles/20070905/20070905212705_02.jpg') no-repeat;}#more{ width:76px; float:left; font-size:10pt; line-height:1.5; margin-left:1px; cursor:pointer; background:url('bg.jpg') no-repeat; color:#FF0000; text-align:right; font-weight:normal}.con{ width:422px; height:184px; margin:0 auto;}</style><head><body><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav1' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="l5" class='default'>第5新闻</li> </ul> <div class='con' id='con1'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div1_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div1_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div1_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div1_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div> <div id="div1_l5"> <span>增加了！</span> </div></div><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav2' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="l4" class='default'>第四新闻</li> <li id="more"><a href="#" mce_href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con2'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div2_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div2_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div2_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div> <div id="div2_l4"> <span>当鼠标放上去时就变，而不用点了！</span> </div></div><mce:script type="text/javascript"></mce:script><div class='tab'> <ul id='nav3' class='menu'> <li id="l1" class='default'>第一新闻</li> <li id="l2" class='default'>第二新闻</li> <li id="l3" class='default'>第三新闻</li> <li id="more" style="width:160px"><a href="#" mce_href="#" target=_blank>更多>></a></li> </ul> <div class='con' id='con3'> </div> </div><div style="display:none" mce_style="display:none"> <div id="div3_l1"> <span>要做一个选项卡，在论坛里找了好久都没有理想的效果</span> </div> <div id="div3_l2"> <span>所以特来问一下高手们，请大家帮帮忙！</span> </div> <div id="div3_l3"> <span>找了几个来改，都是头部的菜单那里太难定位了</span> </div></div><mce:script type="text/javascript"></mce:script></body></html>