直接上代码

<!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>简洁Tab</title>

<style type="text/css">

<!--

body,div,ul,li{

 margin:0 auto;

 padding:0;

}

body{

 font:12px "宋体";

 text-align:center;

}

a:link{

 color:#00F;

 text-decoration:none;

}

a:visited {

 color: #00F;

 text-decoration:none;

}

a:hover {

 color: #c00;

 text-decoration:underline;

}

ul{

 list-style:none;

}

.main{

 clear:both;

 padding:8px;

 text-align:center;

}

/*第一种形式*/

#tabs0 {

 height: 200px;

 width: 400px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

.menu0{

 width: 400px;

}

.menu0 li{

 display:block;

 float: left;

 padding: 4px 0;

 width:100px;

 text-align: center;

 cursor:pointer;

 background: #FFFFff;

}

.menu0 li.hover{

 background: #f2f6fb;

}

#main0 ul{

 display: none;

}

#main0 ul.block{

 display: block;

}

/*第二种形式*/

#tabs1{

 text-align:left;

 width:400px;

}

.menu1box{

 position:relative;

 overflow:hidden;

 height:22px;

 width:400px;

 text-align:left;

}

#menu1{

 position:absolute;

 top:0;

 left:0;

 z-index:1;

}

#menu1 li{

 float:left;

 display:block;

 cursor:pointer;

 width:72px;

 text-align:center;

 line-height:21px;

 height:21px;

}

#menu1 li.hover{

 background:#fff;

 border-left:1px solid #333;

 border-top:1px solid #333;

 border-right:1px solid #333;

}

.main1box{

 clear:both;

 margin-top:-1px;

 border:1px solid #333;

 height:181px;

 width:400px;

}

#main1 ul{

 display: none;

}

#main1 ul.block{

 display: block;

}

/*第三种形式*/

.menu2box{

 position:relative;

 overflow:hidden;

 height:22px;

 width:400px;

 text-align:left;

 background: #FFFFff;

}

#tabs2 {

 height: 200px;

 width: 400px;

 border: 1px solid #cbcbcb;

 background-color: #f2f6fb;

}

#tip2{

 position:absolute;

 top:0;

 left:0;

 height:22px;

 line-height:22px;

 z-index:0;

 width:100px;

 background: #f2f6fb;

}

#menu2{

 position:absolute;

 top:0;

 left:0;

 z-index:1;

}

#menu2 li{

 display:block;

 float: left;

 padding: 4px 0;

 width:100px;

 text-align: center;

 cursor:pointer;

}

-->

</style>

<script>

<!--

/*第一种形式 第二种形式 更换显示样式*/

function setTab(m,n){

 var tli=document.getElementById("menu"+m).getElementsByTagName("li");

 var mli=document.getElementById("main"+m).getElementsByTagName("ul");

 for(i=0;i<tli.length;i++){

  tli[i].className=i==n?"hover":"";

  mli[i].style.display=i==n?"block":"none";

 }

}

/*第三种形式 利用一个背景层定位*/

var m3={0:"",1:"评论内容",2:"技术内容",3:"点评内容"}

function nowtab(m,n){

 if(n!=0 && m3[0]=="")m3[0]=document.getElementById("main2").innerHTML;

 document.getElementById("tip"+m).style.left=n*100+'px';

 document.getElementById("main2").innerHTML=m3[n];

}

//-->

</script>

</head>

<body>

<br />

<br />

<!--第一种形式-->

<div id="tabs0">

 <ul class="menu0" id="menu0">

  <li onclick="setTab(0,0)" class="hover">新闻</li>

  <li onclick="setTab(0,1)">评论</li>

  <li onclick="setTab(0,2)">技术</li>

  <li onclick="setTab(0,3)">点评</li>

 </ul>

 <div class="main" id="main0">

  <ul class="block"><li>新闻列表</li></ul>

  <ul><li>评论列表</li></ul>

  <ul><li>技术列表</li></ul>

  <ul><li>点评列表</li></ul>

 </div>

</div>

<br />

<br />

<!--第二种形式-->

<div id="tabs1">

 <div class="menu1box">

  <ul id="menu1">

   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>

   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>

   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>

   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>

  </ul>

 </div>

 <div class="main1box">

  <div class="main" id="main1">

   <ul class="block"><li>新闻列表</li></ul>

   <ul><li>评论列表</li></ul>

   <ul><li>技术列表</li></ul>

   <ul><li>点评列表</li></ul>

  </div>

 </div>

</div>

<br />

<br />

<!--第三种形式-->

<div id="tabs2">

 <div class="menu2box">

  <div id="tip2"></div>

  <ul id="menu2">

   <li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>

   <li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>

   <li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>

   <li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>

  </ul>

 </div>

  <div class="main" id="main2">

新闻内容

 </div>

</div>

</body>

</html>

tabs(标签页的现成页面)原生js写法的更多相关文章

  1. 布局-EasyUI Panel 面板、EasyUI Tabs 标签页/选项卡、EasyUI Accordion 折叠面板、EasyUI Layout 布局

    EasyUI Panel 面板 通过 $.fn.panel.defaults 重写默认的 defaults. 面板(panel)当做其他内容的容器使用.它是创建其他组件(比如:Layout 布局.Ta ...

  2. tabs标签页的数据缓存

    一进入tabs标签页默认就将所有标签页的数据请求到,并渲染到页面上, 这样如果数据量太大的话会渲染很久, 我的需求就是点击不同的标签时再请求数据,同时对点击过的标签页数据进行缓存,下次点击时不再重新请 ...

  3. 踩iviewui中Tabs 标签页数据绑定坑

    今天小颖要实现点击Tabs 标签页中每个标签,并动态获取当前点击的标签值. 一句话说不清楚,那就看动态图吧 小颖一开始看官网写的代码是: <template> <Tabs :valu ...

  4. easyui,获取tabs标签页内容,以及刷新datagrid

    因为先点开tab页xxx查看表格,再点另一个tab页xxxx修改部分信息,再切换到tab页xxx,tab页xxx里的datagrid表格不会刷新,显示不了修改的信息(在此tab页按F5刷新可以解决,但 ...

  5. Tabs - 标签页

    <div class="J_TWidget tab" data-widget-type="Tabs"style="width:宽度px; hei ...

  6. Jquery实现的Tabs标签页

    效果图: HTML: <div class="tabs"> <ul id="tabs"> <li class="tab- ...

  7. 创建标签等操作DOM的原生js API

    ()创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 ...

  8. vue element-ui Tabs 标签页实现【更多】功能

    element-ui Tabs本身是没有更多功能的,如果在外边添加一个更多按钮,又非常不好看, 而利用API中Tabs Attributes的before-leave勾子方法可以实现这个功能, 简单P ...

  9. js中Tabs插件打开的标签页过多自动关闭

    js方法 function addTab(ResourceID, ResourceName, Url) { if (Url != "" && Url != null ...

随机推荐

  1. ulua

    unity窗口 lua -> Gen LuaWrap + Binder 生成Wrap文件 此类脚本是对Unity中常用的组件进行二次包装 Lua运行后 会把Wrap文件加载到Lua运行环境中 使 ...

  2. 《spring 攻略》笔记1

    chapter1 spring简介 两种spring ioc容器实现类型: BeanFactory ApplicationContext 应用程序上下文 DI技巧: @Autowired(requir ...

  3. 去掉textarea 右下角图标 resize: none;

    如下图默认右下角有小图标: 加个样式: resize: none;就可以了:

  4. 3月份GitHub上最热门的Java开源项目

    今天,我们来盘点3月份GitHub上最热门的Java项目的时候了,如果你每月都有关注猿妹发布的排行榜,那么本月的Java项目对你来说一定不陌生,这些都是曾经多次出现在榜单中的项目: 1 advance ...

  5. kali linux之webshell

    webacoo(web backdoor cookie) 类终端的shell 编码通信内容通过cookie头传输,隐蔽性较强 cm:base64编码的命令 cn:服务器用于返回数据的cookie头的名 ...

  6. 泛型2(lambda表达式/参数绑定)

    lambda 表达式: Lambda表达式完整的声明格式如下: [capture list] (params list) mutable exception-> return type { fu ...

  7. Django 使用第三方服务发送电子邮件

    在 Django 网站中使用 mailgun 的邮件收发服务. 1.在 mailgun 官网上注册个账号(免费,免费账号每个月有10000条收发邮件的服务,对我来说已经完全够用了),注册完成后界面如图 ...

  8. 洛谷P4011 孤岛营救问题（状压+BFS）

    传送门 和网络流有半毛钱关系么…… 可以发现$n,m,p$都特别小,那么考虑状压,每一个状态表示位置以及钥匙的拥有情况,然后每次因为只能走一步,所以可以用bfs求出最优解 然后是某大佬说的注意点:每个 ...

  9. loj2289 [THUWC 2017]在美妙的数学王国中畅游(LCT+Taylor展开)

    link 题目大意: 你需要维护一个树 每个点都有个sin(ax+b)或exp(ax+b)或ax+b 你需要维护一些操作:连边.删边.修改某个点的初等函数.询问某条树链上所有函数带入某个值后权值和或不 ...

  10. 洛谷 P2048 BZOJ 2006 [NOI2010]超级钢琴

    题目描述 小Z是一个小有名气的钢琴家,最近C博士送给了小Z一架超级钢琴,小Z希望能够用这架钢琴创作出世界上最美妙的音乐. 这架超级钢琴可以弹奏出n个音符,编号为1至n.第i个音符的美妙度为Ai,其中A ...