程序博客网 > cnc编程工资高吗

JQuery实战第四讲：标签页效果一

来源：互联网发布：cnc编程工资高吗编辑：程序博客网时间：2024/06/05 17:40

源码：

<?xml version="1.0"encoding="ISO-8859-1" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

<title>Test for jQuery validate() plugin</title>

<link rel="stylesheet"type="text/css" media="screen"href="css/screen.css" />

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript"src="http://dev.jquery.com/view/trunk/plugins/validate/lib/jquery.delegate.js"></script>

<script type="text/javascript"src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>

<script type="text/javascript"src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></script>

<style type="text/css">

ul,li{

margin:0;

padding:0;

list-style:none;

}

li{

/** 浮动 **/

float: left;

background-color:#868686;

color:white;

padding:5px;

margin-right:2px;

/** 用border 把li和div分割 **/

border: 1px solid white;

}

li.tabin{

/** 颜色和下面的div一样 **/

background-color:#6E6E6E;

/** 用border 把li和div看起来连接在一起 **/

border: 1px solid #6E6E6E;

}

div{

/** 防止左飘 **/

clear:left;

background-color:#6E6E6E;

color:white;

width:300px;

height: 100px;

padding:10px;

display:none;

}

div.contentin{

display:block;

}

</style>

<script type="text/javascript">

/** 实现滑动门技术 */

$(document).ready(function(){

// 找到所有的标签

$("li").each(function(index){

$(this).mouseover(function(){

// 将原来显示的div隐藏

$("div.contentin").removeClass("contentin");

$("li.tabin").removeClass("tabin");

//将当前标签对应的内容区域显示出来

$("div").eq(index).addClass("contentin");

$(this).addClass("tabin");

});

});

});

</script>

</head>

<body>

<ul>

<li class="tabin">标签1</li>

<li>标签2</li>

<li>标签3</li>

</ul>

<div class="contentin">我是内容1</div>

<div>我是内容2</div>

<div>我是内容3</div>

</body>

</html>

视频下载：单击下载

cnc编程工资高吗

cnc编程工资高吗

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子姜罚惩戒文光明的惩戒惩戒权晾臀惩戒室 sp惩戒学校私人惩戒岛惩戒猛击惩戒火炬惩戒师惩戒之箭教育惩戒权教育惩戒教师惩戒权惩戒骑天赋姜罚惩戒室惩戒拼音惩戒的拼音惩戒的意思惩戒读音私人惩戒师调带个惩戒去聊斋惩戒所by冰痕第二部送女朋友惩戒所 sp惩戒俱乐部教育惩戒的议论文女子惩戒所打针教育惩戒议论文 sp重度惩戒所被主人带到惩戒室惩戒者第几分钟李泰林总裁被惩戒师惩罚私人惩戒师调被打带着惩戒去聊斋女子惩戒学校私人惩戒公司手动惩戒器只能用三次惩戒教育议论文800字十篇怀旧服惩戒骑惩戒是什么意思惩戒之箭出装被主人惩罚在惩戒室