网页选项卡功能:
当鼠标停留超过300毫秒时,自动显示该页面。
效果图:
![](https://img-my.csdn.net/uploads/201211/10/1352519763_2356.png)
![](https://img-my.csdn.net/uploads/201211/10/1352519818_3974.png)
每个页面的内容都是从数据库中提取的信息。以下是实现代码:
html页面代码:
<html>
<head>
<title>网页选项卡</title>
<link rel="stylesheet" type="text/css" href="card.css">
<script src="jquery.js"></script>
<script src="card.js"></script>
</head>
<body>
<div id="main">
<div id="tit">
<h3 class="titin"><a href="card.php?cid=1">第一页</a></h3>
<h3 ><a href="card.php?cid=2">第二页</a></h3>
<h3 ><a href="card.php?cid=3">第三页</a></h3>
</div>
<div id="content">
</div>
</div>
</body>
</html>
php实现数据库查询代码:
<?php
$cid=$_GET["cid"];
$mysqli=new mysqli("localhost","root","family","card");
$result=$mysqli->query("select title from card where cid=".$cid);
while($row=$result->fetch_assoc()){
echo '<ul>';
echo '<li><a href="con.php?id='.$row["id"].'">'.$row["title"].'</a></li>';
echo '</ul>';
}
?>
css修饰页面代码:
body{
font-size: 12px;
}
#main{
width: 300px;
height:200px;
}
#main h3{
width:80px;
height:25px;
background:#ddd;
float:left;
margin:0px;
padding: 0px;
text-align: center;
line-height: 25px;
font-size: 12px;
margin-right: 2px;
border:2px solid white ;
}
h3 a{
color:white;
}
#content{
background: #0FC;
width: 300px;
height:175px;
float: left;
}
#tit .titin{
border: 2px solid #0FC;
background: #0FC;
}
javascript实现网页选项卡效果代码:
$(function(){
$("#content").load("card.php?cid=1");
var dt=null;
$("#main #tit h3").mouseover(function(){
var obj=$(this);
dt=setTimeout(function(){
obj.addClass("titin").siblings("h3").removeClass("titin");
$("#content").load(obj.children("a").eq(0).attr("href"))
},300)
}).mouseout(function(){
clearTimeout(dt);
});
});