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; }
©软件著作权归作者所有。本站所有软件均来源于网络,仅供学习使用,请支持正版!
转载请注明出处: 我的网站 » php+jquery+css+mysql+html开发网页选项卡
发表评论 取消回复