es, no esperaba el título, temporalmente "cambio de pestaña", el efecto específico es el siguiente:
Descripción del efecto:
cuando el mouse se mueve sobre el título o hace clic en él, se cambia el contenido correspondiente.
Código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.active {color: red;background: #eeeeee;}
ul {list-style: none;padding: 0;margin: 0;}
#item1 {margin-top: 10px;}
.box{width: 200px;height: 200px;margin-right:20px;background: #abcdef; float: left; }
</style>
<body>
<div class="box">
<div id="tab1">
<span class="active">最新新闻</span>
<span>行业新闻</span>
</div>
<div id="item1">
<ul>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
</ul>
<ul style="display:none">
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
</ul>
</div>
</div>
<div class="box">
<div id="tab2">
<span class="active">最新新闻</span>
<span>行业新闻</span>
</div>
<div id="item2">
<ul>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
<li>最新新闻</li>
</ul>
<ul style="display:none">
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
<li>行业新闻</li>
</ul>
</div>
</div>
</body>
<script>
Tab.prototype = {
init: function () {
// 初始化
var _this = this;
for (var i = 0; i < this.idChild.length; i++) {
this.idChild[i].index = i;
this.idChild[i][this.events] = function () {
_this.change(this.index);
}
}
},
change: function (i) {
for (var j = 0; j < this.passiveChild.length; j++) {
this.passiveChild[j].style.display = 'none';
this.idChild[j].className = '';
}
this.passiveChild[i].style.display = 'block';
this.idChild[i].className = "active";
}
};
function Tab(options) {
this.id = document.getElementById(options.id);
this.idChild = this.id.getElementsByTagName(options.idChild);
this.passiveId = document.getElementById(options.passiveId);
this.passiveChild = this.passiveId.getElementsByTagName(options.passiveChild);
this.events = options.events
this.init(); // 初始化方法
}
new Tab({
id: "tab1",
idChild: "span",
passiveId: "item1",
passiveChild: "ul",
events: "onmouseover" // onclick 点击事件
})
new Tab({
id: "tab2",
idChild: "span",
passiveId: "item2",
passiveChild: "ul",
events: "onmouseover" // onclick 点击事件
})
</script>
</html>