简洁实用的TAB选项卡

原创 2012年03月27日 12:28:40

//CSS代码部分

#lib_Tab1{width:980px;margin:0px;padding:0px;}

.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{margin:0px;padding:0px;list-style:none; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox li{
float:left;
display:block;
cursor:pointer;
width:180px;
margin-right:8px;
height:30px;
line-height:25px;
background-color:#05A;
color:#F7F7F7;
font-size:16px;
font-weight:bold;

}
.lib_Menubox li.hover{
font-size:16px;
font-weight:bold;
background:#fff;
display:block;
width:200px;
height:30px;
line-height:25px;
background-color:#004080;
}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:left;padding-top:8px; padding-left:8px;}
.lib_Contentbox li {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: dashed;
border-left-style: none;
border-top-color: #E0E0E0;
border-right-color: #E0E0E0;
border-bottom-color: #E0E0E0;
border-left-color: #E0E0E0;
width:450px; line-height:24px;

}

//JS代码部分



<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
  var menu=document.getElementById(name+i);
  var con=document.getElementById("con_"+name+"_"+i);
  menu.className=i==cursel?"hover":"";
  con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>

//HTML代码部分

<div id="lib_Tab1">
      <div class="lib_Menubox lib_tabborder">
        <ul>
          <li id="one1" onClick="setTab('one',1,4)" class="hover">组团版旅行社管理软件</li>
          <li id="one2" onClick="setTab('one',2,4)" >地接版旅行社管理软件</li>
          <li id="one3" onClick="setTab('one',3,4)">旅游分销系统</li>
          <li id="one4" onClick="setTab('one',4,4)">直客版旅行社网站</li>
        </ul>
      </div>
      <div class="lib_Contentbox lib_tabborder">
        <div id="con_one_1"  style="margin-top:25px;"> [ecmsinfo]3,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_2"   style="margin-top:25px;display:none"> [ecmsinfo]4,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_3" style="margin-top:25px;display:none"> [ecmsinfo]5,6,50,0,0,14,0,0,0[/ecmsinfo] </div>
        <div id="con_one_4" style="margin-top:25px;display:none">
          <table width="98%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center"><a href="/about/map.html" target="_blank"><img src="/skin/wanjia2/images/map.gif" alt="万家版图"   height="180" border="0"></a></td>
            </tr>
          </table>
        </div>
      </div>
    </div>



Tab选项卡切换

Tab选项卡切换 基本代码 HTML代码: div id="notice" class="notice"> div id="notice-tit...
  • winfredzen
  • winfredzen
  • 2016年05月06日 11:40
  • 1762

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月22日 16:25
  • 1382

使用js实现tab选项卡效果

这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所...
  • qq_15096707
  • qq_15096707
  • 2016年01月29日 10:42
  • 2620

JavaScript原生代码编写选项卡Tab页跳转功能

本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能
  • yerongtao
  • yerongtao
  • 2017年04月01日 09:57
  • 843

多个选项卡的嵌套原理

body{font-size:12px;padding:0;margin:0;} ul,li,dl,dd{list-style:none;padding:0;margin:0;} .clr:afte...
  • MajorMayer
  • MajorMayer
  • 2016年01月28日 16:02
  • 1984

JS Tab切换 选项卡 五种方法

一、遍历ID法 css: body,h2{margin:0;} body{font:12px/1.5 "宋体",tahoma,arial;} h2{width:500px;height:50p...
  • g_blue_wind
  • g_blue_wind
  • 2016年07月05日 11:08
  • 5182

多层选项卡嵌套 , js选项卡tab , jquery选项卡

多层选项卡嵌套 js选项卡tab jquery选项卡 选项卡代码 js特效 简单代码
  • tangdou5682
  • tangdou5682
  • 2016年09月05日 12:12
  • 3160

HTML中tab选项卡制作

这次要做的是tab选项卡,也叫滑动门。具体是什么呢?如图 当我鼠标滑过上边标题栏的某一li时,下边显示的内容进行相应的改变。这个在门户网站经常用到。具体怎么做呢?其实很简单啦,只需要当我...
  • u014209090
  • u014209090
  • 2015年03月06日 17:24
  • 2661

CSS实例:Tab选项卡效果

级联样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容...
  • sinat_26342009
  • sinat_26342009
  • 2015年08月11日 11:18
  • 3609

tab标签(选项卡)切换实现

//导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var n...
  • u011019141
  • u011019141
  • 2016年04月10日 22:39
  • 1687
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简洁实用的TAB选项卡
举报原因:
原因补充:

(最多只允许输入30个字)