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

相关推荐

  • WordPress网站HTTPS配置教程 WordPress如何启用HTTPS

    随着HTTPS的不断普及,越来越多的网站开启了HTTPS,给网站加上了小绿锁标识,作为全球知名的建站系统,WordPress对于HTTPS的兼容性是非常好的,几乎不用任何修改,只需要服务器配置好证书即可使用https链接访问。但是经常有用户反馈开启了以后地址栏没有绿色的锁(chrome浏览器),下面简单介绍下配置教程。 以下配置教程是基于已经在服务器配置好S…

    2018-04-15
    2.7K0
  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    4870
  • 一个中老年 App 里的情欲、玄学和“砍一刀”

    继“抓住 00 后”之后,各大 App 抢占“不惑后”——40 岁以上的中老年群体。 2021 年 9 月,微信上线“关怀模式”,与正常模式相比,微信关怀模式对老年群体更友好:文字更大更清晰,色彩更强更好辨认,按钮更大更易用。去年年底,小红书还申请注册了商标“老红书”,想要抓住这一群体。 不是每个中老年人都有钱,但比起正打工的社畜年轻人,至少他们更有时间。 …

    2022-09-17
    2300
  • 苹果不让微信公众号做打赏,其他公司比腾讯还慌

    苹果和腾讯这两个神仙只是闹别扭,其他的小鬼便遭了殃。

    2017-04-20
    3.4K0
  • 运营行业相关词汇

    搜索引擎广告(SEA)Search Engine Advertising,广告主根据自己的产品或服务的内容、特点等,确定相关的关键词,撰写广告内容并自主定价投放的广告。当用户搜索到广告主投放的关键词时,相应的广告就会展示 信息流广告也称“原生广告”,与内容混排在一起,又称“最不像广告的广告”、“长得最像内容的广告”,一般如不留意在它们周围出现的“推广”、“广…

    2020-07-02
    1.2K0