<html>
<head>
<title>选项卡</title>
<style type="text/css">
ul#a{
display:block;
background-color:#99FFFF;}
ul#b{
display:none;
background-color:#FFCCCC;
}
ul#c{
display:none;
background-color:#FFFF99;
}
</style>
<script src="../jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
function change(obj){
alert("dd");
var uls=$("ul");
for(var i=0;i<uls.length;i++){
if(uls.attr("id")!=obj.id)
{
//或者使用Dom 的className("css样式")
uls[i].css("display","none");
}else{
uls[i].css("display","block");
}
}
</script>
</head>
<body>
<div id="newbox">
<div id="title">
<a href="#a1" id="a" onMouseOver="change(this)">国际新闻</a>
<a href="#b1" id="b" onMouseOver="change(this)">娱乐新闻</a>
<a href="#c1" id="c" onMouseOver="change(this)">体育新闻</a>
</div>
<div id="content">
<ul id="a">
<li><a href="">国际新闻1</a></li>
<li><a href="">国际新闻2</a></li>
<li><a href="">国际新闻3</a></li>
<li><a href="">国际新闻4</a></li>
</ul>
<ul id="b">
<li><a href="">娱乐新闻1</a></li>
<li><a href="">娱乐新闻2</a></li>
<li><a href="">娱乐新闻3</a></li>
<li><a href="">娱乐新闻4</a></li>
</ul>
<ul id="c">
<li><a href="">体育新闻1</a></li>
<li><a href="">体育新闻2</a></li>
<li><a href="">体育新闻3</a></li>
<li><a href="">体育新闻4</a></li>
</ul>
</div>
</div>
</body>
</html>[code="html"]
选项卡
<br> ul#a{ <br> display:block; <br> background-color:#99FFFF;} </p> <p>ul#b{ <br> display:none; <br> background-color:#FFCCCC; <br> } <br> ul#c{ <br> display:none; <br> background-color:#FFFF99; <br> } </p> <pre><code> </style> </code></pre> <p><script src="../jquery-1.4.2.js" type="text/javascript"></script> <br> <script type="text/javascript"> </p> <pre><code> function change(obj){ </code></pre> <p>$("ul").each(function(){ <br> $(this).css("display","none"); <br> $("#"+obj.name).css("display","block"); <br> }); </p> <pre><code>} </code></pre> <p></script> </p> <p></head> <br> <body> <br> <div id="newbox"> <br> <div id="title"> <br> <a href="#a1" name="a" onMouseOver="change(this)">国际新闻</a> <br> <a href="#b1" name="b" onMouseOver="change(this)">娱乐新闻</a> <br> <a href="#c1" name="c" onMouseOver="change(this)">体育新闻</a> </p> <pre><code> </div> <div id="content"> <ul id="a"> <li><a href="">国际新闻1</a></li> <li><a href="">国际新闻2</a></li> <li><a href="">国际新闻3</a></li> <li><a href="">国际新闻4</a></li> </ul> <ul id="b"> <li><a href="">娱乐新闻1</a></li> <li><a href="">娱乐新闻2</a></li> <li><a href="">娱乐新闻3</a></li> <li><a href="">娱乐新闻4</a></li> </ul> <ul id="c"> <li><a href="">体育新闻1</a></li> <li><a href="">体育新闻2</a></li> <li><a href="">体育新闻3</a></li> <li><a href="">体育新闻4</a></li> </ul> </div> </div> </code></pre> <p></body> </p> <p></html>[/code]</p>
[color=blue][b]
你的HTML基础不行啊，id怎么能重复呢？id在一个页面中应该是唯一的。[/b][/color]
看看你的代码：
a、b、c这些id值重复了。当然会出错了！！
选项卡
<br> ul#a{<br> display:block;<br> background-color:#99FFFF;}</p> <pre><code> ul#b{ display:none; background-color:#FFCCCC; } ul#c{ display:none; background-color:#FFFF99; } </style> <script src="../jquery-1.4.2.js" type="text/javascript"></script> <script type="text/javascript"> function change(obj){ $("ul").each(function(){ $(this).css("display","none"); $("#"+obj.name).css("display","block"); }); } </script> </code></pre> <p></head><br> <body><br> <div id="newbox"><br> <div id="title"><br> <a href="#a1" name="a" onMouseOver="change(this)">国际新闻</a><br> <a href="#b1" name="b" onMouseOver="change(this)">娱乐新闻</a><br> <a href="#c1" name="c" onMouseOver="change(this)">体育新闻</a></p> <pre><code> </div> <div id="content"> <ul id="a"> <li><a href="">国际新闻1</a></li> <li><a href="">国际新闻2</a></li> <li><a href="">国际新闻3</a></li> <li><a href="">国际新闻4</a></li> </ul> <ul id="b"> <li><a href="">娱乐新闻1</a></li> <li><a href="">娱乐新闻2</a></li> <li><a href="">娱乐新闻3</a></li> <li><a href="">娱乐新闻4</a></li> </ul> <ul id="c"> <li><a href="">体育新闻1</a></li> <li><a href="">体育新闻2</a></li> <li><a href="">体育新闻3</a></li> <li><a href="">体育新闻4</a></li> </ul> </div> </div> </code></pre> <p></body></p> <p></html></p>