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
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

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

相关推荐

  • 父级容器盒子div高度不能自适应解决

    有时父级容器盒子(div)高度不能自适应解决 父级容器DIV盒子高度不能自适应一般是因为子级(儿子)使用了浮动(float)造成,也就是我们所常常说的产生了浮动。 DIV CSS清除浮动让父级容器高度自适应解决这样方法有两种: 1、clear清除浮动 2、对父级使用Overflow:hidden,作用:让父级DIV紧贴子级无论有无浮动均能轻实现高度松自适应。

    2018-03-15
    2.6K0
  • 网页设计标准

    创作了几个网站之后的经验总结,现拿出来和大家分享,如果你有更好的解决方案,也欢迎你来分享

    2018-05-24
    1.7K0
  • 也许是第一次,小米发布了一款激动人心但还无法量产的手机

    无法量产的亮银版,价格据说10万元都搞不定。

    2017-04-19
    3.1K1
  • 用css绘制六边形的div

    用css绘制六边形的div

    2019-01-08
    2.9K0
  • 抖音1月涨粉榜分析 | 2021开年榜有哪些信号放出?

    春节已过,2020年短视频内容界的争奇斗艳也彻底落下了帷幕,内容创作者们集体迈向了新一年,投入了新一轮的战斗。 那么开年之际,抖音的内容创作生态呈现出了怎样的新气象?是否有新的内容形态、新的潜力创作者涌现呢?让我们先来看下1月的抖音涨粉榜单图(政务号、媒体号、明星号除外): 从榜单中上榜红人的涨粉情况,我们可以得到一个最直观的感受:在涨粉态势上,并没有呈现令…

    2021-02-20
    1.2K0
  • 抖音表情包项目的运营逻辑

    趁着周末,本来想约大学的学妹出来吃个饭,顺便增进一下感情,想不到直接被学妹拒绝了,说没时间。 顿时,一股中年危机感涌上心头。难道,我不帅了吗?我的魅力已经消失了吗?我张郎帅尽了吗? 后来,学妹一解释才知道,原来她周末要在家赚钱。说到赚钱,我顿时就来劲了,经过我的软磨硬泡加打破砂锅问到底的精神,最终搞得明明白白、仔仔细细。学妹现在是在做抖音表情包项目,一个月可…

    2022-02-07
    3100