PHP js 点击按钮 切换模版,JS实现的简单标签点击切换功能示例

这篇文章主要介绍了JS实现的简单标签点击切换功能,涉及javascript事件响应及页面元素遍历、属性动态变换等相关操作技巧,对js感兴趣的朋友可以参考下本篇文章

本文实例讲述了JS实现的简单标签点击切换功能。分享给大家供大家参考，具体如下：

具体代码如下：

www.jb51.net 脚本之家

* {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

.box {

width: 400px;

height: 300px;

border: 1px solid #ccc;

margin: 100px auto;

overflow: hidden;

}

.hd {

height: 45px;

}

.hd span {

display: inline-block;

width: 90px;

background-color: pink;

line-height: 45px;

text-align: center;

cursor: pointer;

}

.hd span.current {

background-color: yellowgreen;

}

.bd li {

height: 255px;

background-color: yellowgreen;

display: none;

}

.bd li.current {

display: block;

font-size: 36px;

}

体育

娱乐

新闻

综合

• 我是体育模块
• 我是娱乐模块
• 我是新闻模块
• 我是综合模块

var box = document.getElementById("box");

var spans = box.getElementsByTagName("span");

var lis = box.getElementsByTagName("li");

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

spans[i].aaa = i;

spans[i].onclick = function () {

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

spans[i].className = "";

lis[i].className = "";

}

this.className = "current";

lis[this.aaa].className = "current";

}

}

以上就是本篇文章的所有内容！！希望对大家学习提供到帮助！！

相关推荐：