php之网页选项卡

最新推荐文章于 2021-04-04 01:06:00 发布

ncafei

最新推荐文章于 2021-04-04 01:06:00 发布

阅读量1.2k

点赞数

分类专栏： web

web 专栏收录该内容

44 篇文章 1 订阅

订阅专栏

[html]view plaincopy 
   
print?
 网页选项卡功能：  

[html]view plaincopy 
   
print?
 当鼠标停留超过300毫秒时，自动显示该页面。  

[html]view plaincopy 
   
print?
 效果图：  

[html]view plaincopy 
   
print?
 <img src="https://img-my.csdn.net/uploads/201211/10/1352519763_2356.png" alt=""><img src="https://img-my.csdn.net/uploads/201211/10/1352519818_3974.png" alt="">  

[html]view plaincopy 
   
print?
 每个页面的内容都是从数据库中提取的信息。以下是实现代码：  

[html]view plaincopy 
   
print?
 html页面代码：  

[html]view plaincopy 
   
print?
 <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实现数据库查询代码：  

[html]view plaincopy 
   
print?
 <p><?<a href="http://lib.csdn.net/base/php" class="replace_word" title="PHP知识库" target="_blank" style="color:#df3434; font-weight:bold;">PHP</a>  
    $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>';  
       
    }</p><p>?></p>  

[html]view plaincopy 
   
print?
 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实现网页选项卡效果代码：  

[html]view plaincopy 
   
print?
 $(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);  
           
     });  
       
       
 });  