网站开发之二级选项卡制作记录
来源：互联网 发布：数据库的逻辑设计例题 编辑：程序博客网 时间：2024/06/08 01:06
本吊是程序小白，写的代码肯定质量不高，希望看到的朋友不要笑话。从网上找了一部分源码，结合自己的思考，制作了一个能显示二级选项卡的网页。其中一级选项卡部分的源码是从网上找的，我的工作就是在这个源码的基础上做出了二级选项卡效果。通过自己的研究做出了一点东西，就想找个地方记录一下，想必做技术的都有这个爱好吧。废话不多说，上代码吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>二级选项卡</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script><script type="text/javascript">!window.jQuery && document.write('<script src=http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js><\/script>');</script><script type="text/javascript">$(document).ready(function() {jQuery.jqtab = function(tabtit,tabcon) {$(tabcon).hide();$(tabtit+" li:first").addClass("thistab").show(); $(tabcon+":first").show();$(tabtit+" li").mouseover(function() {$(tabtit+" li").removeClass("thistab");$(this).addClass("thistab"); $(tabcon).hide(); var activeTab = $(this).find("a").attr("tab"); $("#"+activeTab).fadeIn(); return false;});};/*调用方法如下：*/$.jqtab("#tabs",".tab_con");$.jqtab("#tabs2",".tab_con2");});</script><script language="javascript"> function a(o){return document.getElementById(o);}function showdiv(i){for(var j=1;j<=12;j++){a("div"+j).className="undisplay" //将所有DIV隐藏；}for(var k=1;k<=12;k++){if(k==1||k==5||k==9){continue;} a("li"+k).className="list_unchoosed" //将所有LI样式设为未被选中时的样式} a("div"+i).className="display" //显示所需DIVa("li"+i).className="list_choosed" //对应LI变换样式}</script><style>body {color: #333;background: #FFF;font-size: 12px;}ul, dl, dd, h1, h2, h3, h4, h5, h6, form, p {padding: 0;margin: 0;}ul {list-style: none;}a {text-decoration: none;color: #333333;}a:hover {text-decoration: underline;}.clear {clear: both;}.h2 {height: 2px;wodth: 100%;}.h100 {height: 100px;wodth: 100%;}.tab_conbox {overflow: hidden;}.tab_con {display: none;}.tabs {height: 34px;width: 100%;}.tabs li {height: 27px;line-height: 27px;float: left;overflow: hidden;position: relative;text-align: center;background: #15CB00;margin-top: 5px;margin-left: 10px}.tabs li a {display: block;width: 142px;utline: none;font-size: 14px;color: #fff;font-weight: bold}.tabs li a:hover {background: #fff;color: #318600;}.tabs .thistab, .tabs .thistab a:hover {background: #fff;}.tabs .thistab, .tabs .thistab a {background: #fff;color: #318600;}.index00 {width: 550px;height: 32px;line-height: 34px;background: #15CB00}.list01 {width: 300px;height: 30px;margin-left: 10px;top: 0px;border: 1px solid #15CB00;}.list01 li {width: 33.333333333%;height: 25px;padding-top: 5px;float: left;text-align: center;background: #15CB00;}.list02 {width: 300px;height: 30px;margin-left: 100px;top: 0px;border: 1px solid #15CB00;}.list02 li {width: 33.333333333%;height: 25px;padding-top: 5px;float: left;text-align: center;background: #15CB00;}.list03 {width: 300px;height: 30px;margin-left: 241px;top: 0px;border: 1px solid #15CB00;}.list03 li {width: 33.333333333%;height: 25px;padding-top: 5px;float: left;text-align: center;background: #15CB00;}.list_unchoosed {display: block;font-size: 14px;color: #fff;font-weight: bold;line-height: 25px;border-left: 5px solid #15CB00;border-right: 5px solid #15CB00;}.list_choosed {background: #fff;color: #318600;display: block;font-size: 14px;font-weight: bold;line-height: 25px;border-left: 5px solid #15CB00;border-right: 5px solid #15CB00;}.display {display: block;margin-top: 10px;height: 100px;line-height: 100px;border: 1px solid #1456fd;font-size: 20px;font-weight: bold;text-align: center;color: #FF0000;}.undisplay {display: none;}.tab_conbox2 {overflow: hidden;}.tab_con2 {display: none;}.tabs2 {height: 34px;width: 100%;}.tabs2 li {height: 27px;line-height: 27px;float: left;overflow: hidden;position: relative;text-align: center;background: #15CB00;margin-top: 5px;margin-left: 10px}.tabs2 li a {display: block;width: 142px;utline: none;font-size: 14px;color: #fff;font-weight: bold}.tabs2 li a:hover {background: #fff;color: #318600;}.tabs2 .thistab, .tabs2 .thistab a:hover {background: #fff;}.tabs2 .thistab, .tabs2 .thistab a {background: #fff;color: #318600;}.display2 {margin-top: 10px;height: 100px;line-height: 100px;border: 1px solid #1456fd;font-size: 20px;font-weight: bold;text-align: center;color: #FF0000;}</style></head><body><div style="margin: 0px auto;width: 550px;"> <!--主选项卡部分--> <div class="index00"> <ul class="tabs" id="tabs"> <li onmouseover="showdiv(1)"><a href="/" target="_blank" tab="tab1">选项卡1</a></li> <li onmouseover="showdiv(5)"><a href="/" target="_blank" tab="tab2">选项卡2</a></li> <li onmouseover="showdiv(9)"><a href="/" target="_blank" tab="tab3">选项卡3</a></li> </ul> </div> <!--主选项卡部分结束--> <div class="h2 clear"></div> <!--副选项卡部分--> <div> <ul class="tab_conbox"> <!--选项卡1部分--> <li id="tab1" class="tab_con" > <ul class="list01" > <li onmouseover="showdiv(2)"><a href="/" target="_blank" id="li2" class="list_unchoosed">选项卡1-1</a></li> <li onmouseover="showdiv(3)"><a href="/" target="_blank" id="li3" class="list_unchoosed">选项卡1-2</a></li> <li onmouseover="showdiv(4)"><a href="/" target="_blank" id="li4" class="list_unchoosed">选项卡1-3</a></li> </ul> <li id="div1" class="display"> 选项卡1的内容 </li> <li id="div2" class="undisplay" > 选项卡1-1的内容 </li> <li id="div3" class="undisplay" > 选项卡1-2的内容 </li> <li id="div4" class="undisplay" > 选项卡1-3的内容 </li> </li> <!--选项卡1部分结束--> <!--选项卡2部分--> <li id="tab2" class="tab_con" > <ul class="list02" > <li onmouseover="showdiv(6)"><a href="/" target="_blank" id="li6" class="list_unchoosed">选项卡2-1</a></li> <li onmouseover="showdiv(7)"><a href="/" target="_blank" id="li7" class="list_unchoosed">选项卡2-2</a></li> <li onmouseover="showdiv(8)"><a href="/" target="_blank" id="li8" class="list_unchoosed">选项卡2-3</a></li> </ul> <li id="div5" class="undisplay"> 选项卡2的内容 </li> <li id="div6" class="undisplay" > 选项卡2-1的内容 </li> <li id="div7" class="undisplay" > 选项卡2-2的内容 </li> <li id="div8" class="undisplay" > 选项卡2-3的内容 </li> </li> <!--选项卡1部分结束--> <!--选项卡3部分--> <li id="tab3" class="tab_con" > <ul class="list03" > <li onmouseover="showdiv(10)"><a href="/" target="_blank" id="li10" class="list_unchoosed">选项卡3-1</a></li> <li onmouseover="showdiv(11)"><a href="/" target="_blank" id="li11" class="list_unchoosed">选项卡3-2</a></li> <li onmouseover="showdiv(12)"><a href="/" target="_blank" id="li12" class="list_unchoosed">选项卡3-3</a></li> </ul> <li id="div9" class="undisplay"> 选项卡3的内容 </li> <li id="div10" class="undisplay"> 选项卡3-1的内容 </li> <li id="div11" class="undisplay"> 选项卡3-2的内容 </li> <li id="div12" class="undisplay"> 选项卡3-3的内容 </li> </li> <!--选项卡3部分结束--> </ul> </div> <!--副选项卡部分结束--> <div class="h100 clear"></div> <!--作为对比一级选项卡--> <div > <p style="font-size: 20px;font-weight: bold;margin-bottom:10px;">【作为对比:一级选项卡】</p> <div class="index00"> <ul class="tabs2" id="tabs2"> <li ><a href="/" target="_blank" tab="tab4">选项卡1</a></li> <li ><a href="/" target="_blank" tab="tab5">选项卡2</a></li> <li ><a href="/" target="_blank" tab="tab6">选项卡3</a></li> </ul> </div> <div class="h2 clear"></div> <div> <ul class="tab_conbox2"> <li id="tab4" class="tab_con2" > <div class="display2"> 选项卡1的内容 </div> </li> <li id="tab5" class="tab_con2" > <div class="display2">选项卡2的内容</div> </li> <li id="tab6" class="tab_con2" > <div class="display2">选项卡3的内容</div> </li> </ul> </div> </div></div></body></html>总体思想：1、给每一个选项卡对应的内容赋一个ID ，通过JS控制每一个ID的className，从而控制它的显示与隐藏。
2、要显示某个选项卡的内容之前，将所有选项卡的内容隐藏，同时将所有选项卡的LI样式设为未被选中时的样式；之后通过函数的参数显示出所需内容，同时变换对应LI样式。
不足之处：用onmouseover 事件触发函数，如果要选择主选项卡(选项卡1、2、3)里面的内容，那么鼠标不能直接往下移，必须从旁边绕过副选项卡区域
解决方法：用 onclick 事件触发函数，但这种情况下，选项卡内不能含有超链接。
0 0
- 网站开发之二级选项卡制作记录
- 选项菜单之二级菜单
- 选项卡制作问题--折磨了我一整天，记录下来
- 选项卡 一级二级横向
- 腾冲之窗网站制作开发完成
- jquery制作选项卡
- javascript制作选项卡
- 选项卡制作学习
- js选项卡制作
- js选项卡制作
- js 选项卡制作
- html制作选项卡
- 选项卡制作
- axure7 制作选项卡
- 选项卡的制作
- Android开发 漂亮底部Tab 标签 选项卡制作教程
- 制作网站产品浏览记录
- jQuery写二级列表选项卡
- 使用perl的expect对linux下使用fdi…
- leetcode-ZigZag Conversion
- Hadoop入门
- Windows下opencl环境配置
- 小白学c++之模板的使用
- 网站开发之二级选项卡制作记录
- HDU 4362 Dragon Ball 线段树
- android虚拟机
- Android应用程序相关的文件目录详解
- leetcode-Anagrams
- Andorid——ubuntu下的 NDK / JNI
- [hdu 5051]2014上海网络赛 Fraction 数学 Benford's law/打表找规律
- android应用进程
- js 监听表单提交事件，防止表单重复提交
