网站开发之二级选项卡制作记录

最新推荐文章于 2023-03-21 18:09:00 发布
最新推荐文章于 2023-03-21 18:09:00 发布
阅读量1.2k 收藏
点赞数
分类专栏： javascript 文章标签： javascript html 技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NRlovestudy/article/details/39645471
版权

本吊是程序小白，写的代码肯定质量不高，希望看到的朋友不要笑话。从网上找了一部分源码，结合自己的思考，制作了一个能显示二级选项卡的网页。其中一级选项卡部分的源码是从网上找的，我的工作就是在这个源码的基础上做出了二级选项卡效果。通过自己的研究做出了一点东西，就想找个地方记录一下，想必做技术的都有这个爱好吧。废话不多说，上代码吧。 

<!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"          //显示所需DIV
a("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 οnmοuseοver="showdiv(1)"><a href="/" target="_blank" tab="tab1">选项卡1</a></li>
      <li οnmοuseοver="showdiv(5)"><a href="/" target="_blank" tab="tab2">选项卡2</a></li>
      <li  οnmοuseοver="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  οnmοuseοver="showdiv(2)"><a href="/" target="_blank" id="li2" class="list_unchoosed">选项卡1-1</a></li>
          <li  οnmοuseοver="showdiv(3)"><a href="/" target="_blank" id="li3" class="list_unchoosed">选项卡1-2</a></li>
          <li  οnmοuseοver="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  οnmοuseοver="showdiv(6)"><a href="/" target="_blank" id="li6" class="list_unchoosed">选项卡2-1</a></li>
          <li   οnmοuseοver="showdiv(7)"><a href="/" target="_blank"  id="li7" class="list_unchoosed">选项卡2-2</a></li>
          <li   οnmοuseοver="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  οnmοuseοver="showdiv(10)"><a href="/" target="_blank" id="li10" class="list_unchoosed">选项卡3-1</a></li>
          <li  οnmοuseοver="showdiv(11)"><a href="/" target="_blank"  id="li11" class="list_unchoosed">选项卡3-2</a></li>
          <li  οnmοuseοver="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 事件触发函数，但这种情况下，选项卡内不能含有超链接。


NRlovestudy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js制作返回顶部、二级菜单、选项卡、轮播图
04-22
原生js制作返回顶部、二级菜单、选项卡、轮播图
选项卡多级联动
Asbe_fore的博客
08-06 290
<style> *{ padding: 0; margin: 0; } .box{ width: 100%; height: 100%; position: relative; } .tabul{ width: 100%; margin: 0 au..
【设计思考】多层级tab选项卡展示方式
设计の诗
02-29 8509
在后台管理系统的设计中，往往会遇到多层级的查询与展示。如何能更直观地展示数据，并且让用户体验更佳，是在设计过程中需要仔细考虑的问题。 举个例子 现有一个管理系统的原型图如下，共有5个层级，选择数据时，需要一层一层选择。可以看出，原型图中的tab层级虽然清晰，但视觉效果欠佳，尤其是前三层，由于都是横向选择标签，没有辨识度。 解决方法 经过一番思考和对比，确定了一个比较好的展示方式——横纵交错。如第...
html 2级选项卡,H5 自定义选项卡（两级菜单联动）
weixin_29041443的博客
06-03 245
chargeWayIndex = $(this).index();//alert(chargeWayIndex);//$(".btn").removeClass("active");showtopmenu(chargeWayIndex);});//改变三级菜单自定义选项卡function showtopmenu(i){//以下三行代码不能少，会出现BUG$(".top").hide();$("....
JavaScript--全选
huijie_0716的博客
04-22 1199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &...
C#开发实例大全（基础卷）.软件开发技术联盟(带详细书签) PDF 下载
02-20
《C#开发实例大全（基础卷）》筛选、汇集了C#开发从基础知识到高级应用各个层面约600个实例及源代码，每个实例都按实例说明、关键技术、设计过程、详尽注释、秘笈心法的顺序进行了分析解读。全书分6篇共25章，主要...
C#程序开发范例宝典（第2版）.part13
11-12
一部久享盛誉的程序开发宝典。精选570个典型范例，全面覆盖实用和热点技术，涉及面广，实用性强源于实际项目开发，帮助读者短时间掌握更多实用技术，提高编程水平范例经过精心编排，重点、难点突出，易学易懂书后...
B2Bbuilder(B2B电子商务网站) 7.0.1.zip
05-28
VIP等级体系、认证体系、自动生成二级域名、可为商铺绑定顶级域名，实现自主建站 保证金模块 管理员可以对会员收取保证金，并和运营机制相结合，交过保证金的商户，产品会优先显示，为站长增加一个收入来源，可以...
Foxpro 开发答疑160问
10-07
47. 如何用ADO Stream 对象来获取二进制数据　163 48. 如何正确使用SELECT-SQL查询语句　164 第4章　ActiveX控件　180 49. 如何注册ActiveX控件　181 50. 如何调用进度条控件　183 51. 如何使用状态栏控件　184 52....
jQuery二级多级选项卡tab特效
06-09
一款扁平风格jQuery响应速度很快的二级选项卡多级选项卡，顾名思义，就是选项卡中包含了下级选项卡，支持多种样式，当然这样你去调试了。
HTML制作多级菜单_一级下拉菜单导航菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
01-09
HTML制作多级菜单_一级下拉菜单+二三级选项卡tab-移动到菜单上就切换选项卡.zip
超炫多级选项卡
07-19
超级多级选项卡， 可更改， 代码 源码
java实现选项卡
03-21
java实现选项卡，代码简洁注释详细。有意者请参考！
jQuery实现带延迟的二级tab切换下拉列表效果
10-23
主要介绍了jQuery实现带延迟的二级tab切换下拉列表效果,涉及jquery鼠标事件及页面元素样式动态变换的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js实现选项卡功能
qq_41656414的博客
11-04 312
Title 选卡1 选卡2 选卡3 选卡4 内容1 内容2 内容3 内容4 ...
二级选项卡
m0_48893127的博客
03-21 67
二级选项卡
publiccms实现多层级选项卡效果
穆雄雄的博客
12-29 571
大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂 前言 距离上次更新已经好久了~最近心有余而力不足。。 最近在学习freammarker标签，算是比较老的技术了，白天写，晚上做梦都在写，不吐槽了，反正就是真难用啊，语法还复杂。。 刚刚实现了个多级选项卡的效果，框架使用的是publiccms,不得不说，这个publiccms刚开始用的时候，让你有一万种放弃他的理由，为什么？因为太灵活了，灵活的有点乱了都。不过当你用熟练了之后，发现这个玩意还是挺好用的，既方便又省事，唯一一点不足的就是，内部标签使用的是..
jQuery选项卡制作
最新发布
04-13
可以使用 jQuery UI 来制作选项卡。在 HTML 中，创建一个 div 元素，并添加 class 为 "tabs"，然后在其中创建多个 div 元素作为选项卡的面板，在每个面板中添加对应的内容。在 JavaScript 中，使用 $(".tabs").tabs...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值