<div class="TabGroup" id="Tab">
<div class="TabPanel"><a href="#" class="Current">热门源码推荐</a></div>
<div class="TabPanel"><a href="#">热门软件推荐</a></div>
</div>
<div class="CommendList" id="Item1">
内容1
</div>
<div class="CommendList" id="Item2">
内容2
</div>样式默认Item2为display:none;
要求：当鼠标移动到<div class="TabGroup" id="Tab">的时候可以切换样式。
if($(this).next(".TabPanel").length == 1) {
$("Item2").show();
$("Item1").hide();
} else {
$("Item2").hide();
$("Item1").show();
}
});
$("#Tab>div>a").mouseover(function(){
$("#Tab>div>a").removeClass('Current');
$(this).addClass('Current');
});
})我这个是可以更改上面那个样式，还有要怎么隐藏下面的那个item
$(document).ready(function(){
$("#Tab>div>a").mouseover(function(){
$("#Tab>div>a").removeClass('Current');
$(this).addClass('Current');
if($(this).parent("div").next(".TabPanel").length > 0) {
$("Item2").show();
$("Item1").hide();
} else {
$("Item2").hide();
$("Item1").show();
}
});
})
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<style>
ul
{
padding: 0px;
margin: 0px;
}
ul ul
{
margin-left: 15px;
display:none;
}
li
{
margin-top:5px;
}
</style>
<script type="text/javascript">
function show(obj){
var bigUl=obj.parentNode.parentNode;
var liList=bigUl.getElementsByTagName("li");
for(var i=0;i<liList.length;i++)
{
var smallUl=liList[i].getElementsByTagName("ul");
if(smallUl.length>0)
{
if(liList[i]==obj.parentNode)
{
smallUl[0].style.display="block";
}
else
{
smallUl[0].style.display="none";
}
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="#" >java1</a>
<ul style="display:block">
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
</ul>
</li>
<li><a href="#">net2</a>
<ul>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
</ul>
</li>
<li><a href="#">java3</a>
<ul>
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
<li>j2ee</li>
<li>jsp</li>
<li>j2me</li>
</ul>
</li>
<li><a href="#">net4</a>
<ul>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
</ul>
</li>
<li><a href="#">net5</a>
<ul>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
</ul>
</li>
<li><a href="#">net6</a>
<ul>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
</ul>
</li>
<li><a href="#" >net7</a>
<ul>
<li>aspnet</li>
<li>winform</li>
<li>netmoblie</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var aList=document.getElementsByTagName("a");
for(var i=0;i<aList.length;i++)
{
aList[i].onmousemove=function(){
show(this);
};
}
</script>
</body>
</html>供参考
<div class="TabGroup" id="Tab">
<div class="TabPanel"><a href="#" class="Current">热门源码推荐1</a></div>
<div class="TabPanel"><a href="#">热门软件推荐2</a></div>
<div class="TabPanel"><a href="#">热门软件推荐3</a></div>
<div class="TabPanel"><a href="#">热门软件推荐4</a></div>
</div>
<div class="CommendList" id="Item1" style="display:block">
内容1 默认显示
</div>
<div class="CommendList" id="Item2">
内容2
</div>
<div class="CommendList" id="Item3">
内容3
</div>
<div class="CommendList" id="Item4">
内容4
</div>window.onload=function(){var Tab = document.getElementById("Tab");
var aList=Tab.getElementsByTagName("a");
for(var i=0;i<aList.length;i++){
(function(i){
aList[i].onmouseover = function(){
for(var j=0;j<4;j++){
document.getElementById("Item"+(j+1)).style.display = j==i?"block":"none";
aList[j].className= i==j ? "Current":"";
}
};
})(i);
}};
$("#Tab>div>a").mouseover(function(){
$("#Tab>div>a").removeClass('Current');
$(this).addClass('Current');
if($(this).parent("div").next(".TabPanel").length > 0) {
$("Item2").show();
$("Item1").hide();
} else {
$("Item2").hide();
$("Item1").show();
}
});
})
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Untitled Document</title>
<script language="JavaScript" src="js/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function(){
$("#Tab").mouseover(function(){
$("#Item1,#Item2").toggle();
});
});
</script>
</head>
<body>
<div class="TabGroup" id="Tab">
<div class="TabPanel">
<a href="#" class="Current">热门源码推荐</a>
</div>
<div class="TabPanel">
<a href="#">热门软件推荐</a>
</div>
</div>
<div class="CommendList" id="Item1">
内容1
</div>
<div class="CommendList" id="Item2" style="display:none">
内容2
</div>
</body>
</html>