js选项卡

方法一:

<li id="tab1" onClick="show(1)" style="background-color:green">选项1</li>

<li id="tab2" onClick="show(2)">选项2</li>

<p id="p1">选项卡1的内容。。。</p>
<p id="p2" style="display:none">选项卡2的内容。。。</p>

<script>
function show(n){
for(var i=1;i<=2;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>

方法二:

<strong id="tab1" onmouseover="show(1)" style="color:#C70100">公司新闻</strong>

<strong id="tab2" onmouseover="show(2)" style="color:#0056BB;font-weight:normal">行业动态</strong>

<p id="p1">选项卡1的内容。。。</p>
<p id="p2" style="display:none">选项卡2的内容。。。</p>

<script>
function show(n){
for(var i=1;i<=2;i++){
//先把所有的选项卡颜色,内容都隐藏。
var add = document.getElementById("tab"+i);
add.style.cssText = "color:#0056BB;font-weight:normal";
document.getElementById("p"+i).style.display = 'none';
}
var ddd = document.getElementById("tab"+n);
ddd.style.cssText = "color:#C70100;font-weight:blod";

document.getElementById("p"+n).style.display = "block";
}
</script>

注:方法一和方法二没有区别,但方法二可以多加几个CSS属性值。

 

本文固定链接: http://blog.wmphp.com/1647.html | 顺盛网络博客

该日志由 admin 于2014年06月09日发表在 Javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: js选项卡 | 顺盛网络博客
【上一篇】
【下一篇】

js选项卡:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter