怎么样用CSS处理鼠标点击事件,比如2345网站导航上面的切换,就(网站 M...

发布网友发布时间：2022-05-07 03:37

共1个回答

热心网友时间：2022-04-20 20:51

这个效果可以通过js与iframe的结合来实现。
也可以通过jquery来实现。
下面是我写的通过jquery来实现的源代码：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
ul{
margin-top:30px;
list-style:none;
float:left;
}
ul li{
float:left;
display:block;
margin-right:10px;
border:1px solid #09F;
padding:5px;
font-size:13px;
}
span{
font-size:13px;
margin-left:20px;
margin-right:10px;
}
.textsty{
width:250px;
}
div.theShow{
padding-top:20px;
border:1px solid #06F;
}
#test1 p{
margin-bottom:15px;
}
</style>
<script type="text/javascript" src="childHL/jquery.js"></script>
<script type="text/javascript" >
function loadhtml(oObj,num){
for(var i=1; i<=3; i++){
$("#thUl li:nth-child("+i+")").css({background: "none"});
}
$("#thUl li:nth-child("+num+")").css({background: "#09F"});
if(num==1){
setTimeout("$('#test1').load('childHL/theOne.html');",100); //通过这句实现页面的切换
}
else if(num==2){
setTimeout("$('#test1').load('childHL/theTwo.html');",100);
}
else if(num==3){
setTimeout("$('#test1').load('childHL/theThree.html');",100);
}
}
</script>
</head>

<body>
<ul id="thUl">
<li onclick="loadhtml(this,1)" style="background:#09F">网页</li>
<li onclick="loadhtml(this,2)" style=" background:none">MP3</li>
<li onclick="loadhtml(this,3)" style="background:none">视频</li>
<li>图片</li> 
</ul>
<div style="clear:left;"></div>
<div class="theShow" id="test1">
<p>
<span>Bai 百度:</span><input class="textsty" type="text" /><input type="submit" value="搜索" />
</p>
</div>
</body>
</html>
关于iframe的我还没有做，等我做好后，再来show给你看（估计那时候早就有高人帮你解答了）。
另外也可以通过层的显示与隐藏来实现。