* index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab标签切换 去掉jQuery</title>
<link href="css/tabswitch.css" type="text/css" rel="stylesheet"/>
<!-- <script src="js/jquery-3.2.1.js"></script> -->
</head>
<body>
<h1 id="demo"><a href="https://blog.csdn.net/mqy1023/article/details/51194823" target="_blank">demo</a></h1>
<div>
<div id="notice" class="notice">
<!-- 上面的标题栏 -->
<div class="notice-title">
<ul>
<li class="title-item select"><a href="#">公告</a></li>
<li class="title-item"><a href="#">规则</a></li>
<li class="title-item"><a href="#">论坛</a></li>
<li class="title-item"><a href="#">安全</a></li>
<li class="title-item"><a href="#">公益</a></li>
</ul>
</div>
<!-- 下面的内容部分 -->
<div class="notice-content">
<!-- 第一个内容模块 -->
<div class="module active">
<ul>
<li><a href="#">张勇：要玩快乐足球</a></li>
<li><a href="#">阿里2000万驰援灾区！</a></li>
<li><a href="#">旅游宝让你边玩边赚钱</a></li>
<li><a href="#">多行跟进阿里信用贷款</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><span>[<a href="#">通知</a>]</span><a href="#">"滥发"即将换新</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">比特币严管啦！</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">禁发商品名录!</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">商品属性限制</a></li>
</ul>
</div>
<div class="module">
<ul>
<li><span>[<a href="#">聚焦</a>]</span><a href="#">金牌卖家再启航</a></li>
<li><span>[<a href="#">通知</a>]</span><a href="#">橱窗规则升级啦</a></li>
<li><span>[<a href="#">话题</a>]</span><a href="#">又爱又恨优惠劵</a></li>
<li><span>[<a href="#">工具</a>]</span><a href="#">购后送店铺红</a></li>
</ul>
</div>
<div class="module">
<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="module">
<ul>
<li><a href="#">走进无声课堂</a></li>
<li><a href="#">淘宝大众评审赢公益金！</a></li>
<li><a href="#">爱心品牌联合征集</a></li>
<li><a href="#">名公益机构淘宝开店攻略</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/TabSwitcher.js"></script>
<script>
window.onload = function () {
var ts = new TabSwitcher({
wrapper: "#notice",
tabs: ".title-item",
contents: ".notice-content>.module",
tabActiveClass: "select",
contentActiveClass: "active"
});
}
</script>
</body>
</html>* css/tabswitch.css
/*取消默认样式*/
* { padding: 0; margin: 0; list-style: none; font-size: 12px; }
.notice { /*整个div长宽为300 * 100*/
width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden;
}
.notice-title { /*标题的样式*/
height: 27px; position: relative; background-color: #F7F7F7;
}
.notice-title ul { /* absolute + left */
position: absolute; width: 300px; left: -1px; /*往左移1px，因为li左右边有border边框*/
}
.notice-title ul li {
float: left; width: 58px; /*58+padding的2像素*/
height: 26px; line-height: 26px; text-align: center; overflow: hidden;
background-color: #F7F7F7; border-bottom: 1px solid #eee; padding: 0 1px; /*左右边padding一个像素*/
}
.notice-title ul li.select {
background: #FFF; border-bottom-color: #FFF; /*下面border置白*/
border-left: 1px solid #ccc; /*左右边border*/
border-right: 1px solid #ccc; padding: 0; font-weight: bolder;
}
.notice-title ul li.select > a {
transform: scale(1.1);
}
.notice li a:link, .notice li a:visited {/*清除默认下划线和设置默认字体颜色*/
text-decoration: none; color: #000;
}
.notice li a:hover { color: #F90; }/*划过的样式*/
.notice-content .module { margin: 10px 6px; display: none; transition: 0.3s ease-in;}
.notice-content .module.active {display: block;}
.notice-content .module ul li {
float: left; width: 143px; /*(298-6*2)/2*/
height: 25px; overflow: hidden;
}
#demo {
position: absolute;
right: 0;
top: 0;
}* js/TabSwitcher.js
function TabSwitcher(o) {
this.wrapper = o.wrapper;
this.tabs = o.tabs;
this.contents = o.contents;
this.tabActiveClass = o.tabActiveClass;
this.contentActiveClass = o.contentActiveClass;
this.timeoutID = 0;
this.init();
}
/**
* Usage: dom.trigger("click")
* @param {*} eventName "click","mouseover",...
*/
HTMLElement.prototype.trigger = function(eventName) {
var myEvent = document.createEvent('Event');
myEvent.initEvent(eventName, true, true);
this.dispatchEvent(myEvent);
}
TabSwitcher.prototype.init = function () {
var tabs = document.querySelectorAll(this.tabs),
contents = document.querySelectorAll(this.contents),
last = 0,
cs = this.contentActiveClass,
ts = this.tabActiveClass;
var instance = this;
tabs.forEach(function (tab, i) {
(function (i) {
tab.addEventListener("mouseover", function () {
var that = this;
instance.timeoutID = setTimeout(function () {
tabs[last].classList.remove(ts);
contents[last].classList.remove(cs);
last = i;
that.classList.add(ts);
contents[i].classList.add(cs);
}, 30);
});
tab.addEventListener("mouseout", function () {
clearTimeout(instance.timeoutID);
});
})(i);
});
var carousel = (function (tabs) {
var timer = 0, index = 0, size = tabs.length;
return {
isPlaying: function() {
return timer;
},
play: function () {
tabs[index].trigger("mouseover");
index = (index + 1) % size;
var that = this;
timer = setTimeout(function () {
that.play();
}, 5000);
},
cancel: function () {
clearTimeout(timer);
timer = 0;
}
}
})(tabs);
carousel.play();
var wrapper = document.querySelector(this.wrapper);
wrapper.onmouseover = function() {
carousel.cancel();
}
wrapper.onmouseleave = function() {
carousel.play();
}
}