利用js实现选项卡的特别效果的实例
更新时间：2013年03月03日 16:02:35 投稿：shangke
利用js实现选项卡的特别效果的实例，需要的朋友可以参考一下
复制代码 代码如下:
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;border:0}
#main{width:300px;height:300px;background-color:green}
#head{height:50px;background-color:red}
#head li{float:left;list-style:none;height:50px;width:72px;text-align:center;line-height:50px;background-color:orange;margin-right:3px}
</style>
</head>
<body>
<div id="main">
<div id="head">
<ul>
<li id="tab1" onclick="show(1)" style="background-color:green">新闻</li>
<li id="tab2" onclick="show(2)">体育</li>
<li id="tab3" onclick="show(3)">音乐</li>
<li id="tab4" onclick="show(4)">娱乐</li>
</ul>
</div>
</body>
<script>
function show(n){
for(var i=1;i<=4;i++){
//先把所有的选项卡背景颜色设为橙色，内容都隐藏
document.getElementById("tab"+i).style.backgroundColor = 'orange';
document.getElementById("p"+i).style.display = 'none';
}
document.getElementById("tab"+n).style.backgroundColor = 'green';
document.getElementById("p"+n).style.display = "block";
}
</script>
</html>
相关文章
这篇文章主要介绍了基于JavaScript实现添加到购物车效果附源码下载的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
本文分为两部分介绍Bootstrap首页内容介绍的实现代码，感兴趣的小伙伴们可以参考一下2016-04-04
这篇文章主要介绍了JavaScript实现信用卡校验方法,涉及javascript使用Luhn算法进行校验的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
这篇文章主要介绍了Javascript如何递归遍历本地文件夹，文中代码非常细致，帮助大家更好的理解和学习JavaScript递归，感兴趣的朋友可以了解下2020-08-08
做web开发的朋友都清楚，js程序的调试是相当郁闷的，因为首先这种语言语法比较灵活，它是一种弱类型的脚本语言，很多错误是无法控制的。2010-10-10
js利用Array.splice实现Array的insert/remove
从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。2009-01-01
本文是对js动态修改input输入框的type属性的实现方法。进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
软件中的“记住密码”选框不知道大家平时会不会勾选，反正对于一个重度懒癌患者的我来说就没有不勾选的时候，毕竟隔一段时间就重新输入一遍难记又难输的账号密码，想想就让人头皮发麻。今天教大家用代码在微信小程序中实现这个简单的小功能2023-01-01
这篇文章主要介绍了如何从对象数组中筛选符合条件的值，具有很好的参考价值，希望对大家有所帮助。2022-09-09
javascript Onunload与Onbeforeunload使用小结
Onunload，onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。2009-12-12
最新评论