HTML Tab选项卡源码

HTML Tab选项卡效果如图所示:

tab选项卡

代码如下:

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<title>

选项卡

</title>

<link href="css/index.css" rel="stylesheet">

<script src="js/index.js" type="text/javascript">

</script>

</head>


<body>

<!--选项卡-->

<div id="tab">

<!--选项的头部-->

<div id="tab-header">

<ul>

<li class="selected">

公告

</li>

<li>

规则

</li>

<li>

产品

</li>

<li>

案例

</li>

<li>

资料

</li>

<!--<li>技术</li>-->

</ul>

</div>

<!--主要内容-->

<div id="tab-content">

<div class="dom" style="display: block;">

<ul>

<li>

<a href="#">

数据七夕:金牛爱送玫瑰

</a>

</li>

<li>

<a href="#">

阿里打造"互联网监管"

</a>

</li>

<li>

<a href="#">

10万家店60万新品

</a>

</li>

<li>

<a href="#">

全球最大网上时装周

</a>

</li>

</ul>

</div>

<div class="dom">

<ul>

<li>

<a href="#">

“全额返现”要管控啦

</a>

</li>

<li>

<a href="#">

淘宝新规发布汇总(7月)

</a>

</li>

<li>

<a href="#">

炒信规则调整意见反馈

</a>

</li>

<li>

<a href="#">

质量相关规则近期变更

</a>

</li>

</ul>

</div>

<div class="dom">

<ul>

<li>

<a href="#">

阿里建商家全链路服务

</a>

</li>

<li>

<a href="#">

个性化的消费时代来临

</a>

</li>

<li>

<a href="#">

跨境贸易是中小企业机

</a>

</li>

<li>

<a href="#">

美妆行业虚假信息管控

</a>

</li>

</ul>

</div>

<div class="dom">

<ul>

<li>

<a href="#">

接次文件,毁了一家店

</a>

</li>

<li>

<a href="#">

账号安全神器阿里钱盾

</a>

</li>

<li>

<a href="#">

新版阿里110上线了

</a>

</li>

<li>

<a href="#">

卖家学违禁避免被处罚

</a>

</li>

</ul>

</div>

<div class="dom">

<ul>

<li>

<a href="#">

为了公益high起来

</a>

</li>

<li>

<a href="#">

魔豆妈妈在线申请

</a>

</li>

</ul>

</div>

</div>

</div>

</body>

</html>

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {

padding: 0;

margin: 0;

}

a {

color: black;

text-decoration: none;

}

ul {

list-style: none;

}

#tab {

width: 498px;

height: 130px;

border: 1px solid #ddd;

box-shadow: 0 0 2px #ddd;

margin: 100px 0 0 100px;

/*处理超出的内容*/

overflow: hidden;

}

/*选项卡的头部*/

#tab-header {

background-color: #F7F7F7;

height: 33px;

text-align: center;

position: relative;

}

#tab-header ul {

width: 500px;

position: absolute;

left: -1px;

}

#tab-header ul li {

float: left;

width: 98px;

height: 33px;

line-height: 33px;

padding: 0 1px;

border-bottom: 1px solid #dddddd;

}

#tab-header ul li.selected {

background-color: white;

font-weight: bolder;

border-bottom: 0;

border-left: 1px solid #dddddd;

border-right: 1px solid #dddddd;

padding: 0;

}

#tab-header ul li:hover {

color: orangered;

}

/*主要内容*/

#tab-content .dom {

display: none;

}

#tab-content .dom ul li {

float: left;

/*background-color: red;*/

margin: 15px 10px;

width: 225px;

}

#tab-content .dom ul li a:hover {

color: orange;

}

// == 值比较 === 类型比较 $(id) ----> document.getElementById(id)

function $(id) {

return typeof id === 'string' ? document.getElementById(id) : id;

}

// 当页面加载完毕

window.onload = function() {

// 拿到所有的标题(li标签) 和 标题对应的内容(div)

var titles = $('tab-header').getElementsByTagName('li');

var divs = $('tab-content').getElementsByClassName('dom');

// 判断

if (titles.length != divs.length) return;

// 遍历

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

// 取出li标签

var li = titles[i];

li.id = i;

// console.log(li);

// 监听鼠标的移动

li.onmousemove = function() {

for (var j = 0; j < titles.length; j++) {

titles[j].className = '';

divs[j].style.display = 'none';

}

this.className = 'selected';

divs[this.id].style.display = 'block';

}

}

}

作者:小屋
链接:http://www.rumenwu.com/operate/452.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(12)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-02-08 05:21
下一篇 2018-02-09 15:37

相关推荐