理想的效果是光标划过标签,就会显示不同的div块,代码没有效果,求大佬指点
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tag1").mouseover(function(){
$(".divBox1").show();
$(".divBox2").hide();
});
$("#tag2").mouseover(function(){
$(".divBox2").show();
$(".divBox1").hide();
});
});
</script>
<style type="text/css">
#func{
border-left-style: solid;
border-right-style: solid;
border-color: #DDDDDD;
margin:10px auto;
height:1000px;
width:1000px;
}
#func #tag{
margin:0 auto;
width:800px;
height:40px;
padding-left:200px;
background-color: #F0F0F0;
}
#func #tag a{
display: inline-block;
float:left;
height:40px;
width:100px;
color:#000000;
background-color:#F0F0F0;
text-align: center;
line-height: 40px;
border-color:#656565;
}
#func #tag a:hover{
color:#FFB226;
background-color:#FFFFFF;
line-height:35px;
border-top-style: solid;
border-top-color: #FFB226;
}
.divbox1{
width:1000px;
height:500px;
background-color:red;
}
.divbox2{
width:1000px;
height:500px;
background-color:green;
}
.tag1{}.tag2{}
</style>
</head>
<body>
<jsp:include page="head.jsp"></jsp:include>
<%
if(session.getAttribute("userbean") == null){
%>
请登录
<%
}else{
%>
<div id="func">
<div id="tag">
<a id="tag1">TAG1</a>
<a id="tag2">TAG2</a>
</div>
<div class="divbox1" style="display:none;"></div>
<div class="divbox2" style="display:none;"></div>
</div>
<%
}
%>
</body>
</html>