php之网页选项卡_php 选项卡-CSDN博客

本文链接：https://blog.csdn.net/supersnow0622/article/details/8168779

网页选项卡功能：

当鼠标停留超过300毫秒时，自动显示该页面。

效果图：

每个页面的内容都是从数据库中提取的信息。以下是实现代码：

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);
        
    });
    
    
});