php+jquery+css+mysql+html开发网页选项卡

致敬曾经一度想去的培训学校,因某种原因未能去成;面对当时的迷茫,每次一呼吸都想把周围的空气洗到肺里。一次面试(面试官热心地给我介绍了他们免费推出的初级视频教程,我在网上找到了,此套教程帮我在迷茫期鼓起了勇气),经过几周对视频的学习,明白了bs软件架构建站的整个流程,后来花了大部分时间学习,html,php,css,jquery,什么是lamp;后来找到了自己的第一份工作。

应用介绍

Thinks!

致敬曾经一度想去的培训学校,因某种原因未能去成;面对当时的迷茫,每次一呼吸都想把周围的空气洗到肺里。一次面试(面试官热心地给我介绍了他们免费推出的初级视频教程,我在网上找到了,此套教程帮我在迷茫期鼓起了勇气),经过几周对视频的学习,明白了bs软件架构建站的整个流程,后来花了大部分时间学习,html,php,css,jquery,什么是lamp;后来找到了自己的第一份工作。面对今年,说一声,谢天谢地,天还在!为什么发这些内容,只想分享,不论最近几年技术的革新,单都离不开这些最基础的知识,Salute to the lamp brothers.

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", "123456", "card");

    $result=$mysqli->query("select id, 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>';
    }
Jquery部分
$(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);
    });
});
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;
}

a {
    color:white;
}

#main #content {
    background:#888;
    width:300px;
    height:175px;
    float:left;
}

#tit .titin {
    border:2px solid #888;
    background:#888;
}
点赞(2) 打赏

立即下载

评论列表 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部