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属性值。