您的位置：首页 > 编程语言 > PHP开发

教你用php制作一个网页选项卡

2013-06-20 16:36 337 查看

我们每天上网，会打开各种形形色色的网页，在网页中会遇见各种各样美妙的选项卡，点击选项卡会跳到不同的网页页面，如下图所示

图一选项卡一

图2 选项卡二选项卡的制作设计到许多方面的技术，有数据库方面的、javascript方面的，css样式方面的等等，下面我来教你制作一个简单的网页选项卡，我将采用mysql数据库、php脚本开发语言、jquery、javascript特效、css样式的一些知识。 1.数据库的操作使用数据库来存储选项卡使用的内容，建表和建数据库语言如下

create database card; /*建立数据库card*/
use card; /*打开数据库card*/
create table card(   /*建立数据表card*/
id int,
cid int,
title varchar(60)
);
插入一些数据
insert into card(id, cid, title) values(1, 1, '1111111111111111111');
insert into card(id, cid, title) values(2, 1, '2222222222222222222');
insert into card(id, cid, title) values(3, 1, '3333333333333333333');
insert into card(id, cid, title) values(4, 2, '444444444444444444');
insert into card(id, cid, title) values(5, 2, '555555555555555555');
insert into card(id, cid, title) values(6, 2, '666666666666666666');
insert into card(id, cid, title) values(7, 3, '7777777777777777');
insert into card(id, cid, title) values(8, 3, '888888888888888888');
insert into card(id, cid, title) values(9, 3, '9999999999999999999999');

2.建立card.tml页面，使用div来布局，css来做美工，使用js来做特效，样式文件见附件css样式文件card.css，js特效页面见附件javascript文件card.js，jquery文件见附件jquery文件jquery.js，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>

3.php 后台操作界面代码 card.php

<?php
$cid=$_GET["cid"];
$mysqli=new mysqli("localhost", "root", "p@ssw0rd", "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>';
}

4.效果图预览

图三效果图预览

附件：http://down.51cto.com/data/2363051

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： PHP MySQL 选项卡 JQuery

相关文章推荐

新的分享

章节导航