Jquery之选项卡效果
来源：互联网 发布：7.0wow mac 插件 编辑：程序博客网 时间：2024/06/05 17:03
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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>Jquery之选项卡效果</title>
<style type="text/css">
*{padding:0px; margin:0px; list-style:none; text-decoration: none; text-align: center; vertical-align:middle;}
.tab{ border: 1px solid black; width:350px; height: 350px; position: relative; left: 200px; top:100px;}
.tab_ul{ width: 300px; height: 30px; line-height:30px;}
.tab_ul li{ width: 98px;height: 98%; float:left; border: 1px solid black;}
.tab_div{ background: #9CF; overflow: hidden; clear:both; width: 300px; height: 100px;}
.tab_div div{ float:left; width: 300px; height: 100px;}
.head{ background: #FF0;}
.red{ background: red;}
.orange{ background: orange;}
.blue{ background: blue;}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".tab_div").find("div").eq(0).show().siblings().hide();
$(".tab_ul").find("li").eq(0).addClass("head");
$(".tab_ul li").mouseover(
function(){
$(this).addClass("head").siblings().removeClass("head").end().parent().next().children("div").eq($(this).index()).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<ul class="tab_ul">
<li>红</li>
<li>黄</li>
<li>蓝</li>
</ul>
<div class="tab_div">
<div class="red"></div>
<div class="orange"></div>
<div class="blue"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery之选项卡效果</title>
<style type="text/css">
*{padding:0px; margin:0px; list-style:none; text-decoration: none; text-align: center; vertical-align:middle;}
.tab{ border: 1px solid black; width:350px; height: 350px; position: relative; left: 200px; top:100px;}
.tab_ul{ width: 300px; height: 30px; line-height:30px;}
.tab_ul li{ width: 98px;height: 98%; float:left; border: 1px solid black;}
.tab_div{ background: #9CF; overflow: hidden; clear:both; width: 300px; height: 100px;}
.tab_div div{ float:left; width: 300px; height: 100px;}
.head{ background: #FF0;}
.red{ background: red;}
.orange{ background: orange;}
.blue{ background: blue;}
</style>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".tab_div").find("div").eq(0).show().siblings().hide();
$(".tab_ul").find("li").eq(0).addClass("head");
$(".tab_ul li").mouseover(
function(){
$(this).addClass("head").siblings().removeClass("head").end().parent().next().children("div").eq($(this).index()).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<ul class="tab_ul">
<li>红</li>
<li>黄</li>
<li>蓝</li>
</ul>
<div class="tab_div">
<div class="red"></div>
<div class="orange"></div>
<div class="blue"></div>
</div>
</div>
</body>
</html>
阅读全文
0 0
- Jquery之选项卡效果
- jQuery效果之选项卡一
- jQuery效果之选项卡二
- jQuery效果之选项卡三
- jquery选项卡效果
- jQuery效果之tab选项卡及jQuery插件开发
- jQuery UI选项卡效果
- JQuery实现选项卡效果
- jQuery仿京东选项卡放大镜效果
- jQuery实现选项卡（tabs）效果
- jQuery实现选项卡（tabs）效果
- jquery 实现简单tab选项卡效果
- 三行jquery实现选项卡效果
- jquery简单实现tab选项卡效果
- jquery简单实现tab选项卡效果
- jquery超简易选项卡切换效果
- jquery简单实现tab选项卡效果
- 【jquery】tabs选项卡切换效果（jquery版）
- 数字字符转换成数字
- VMware模拟搭建路由环境
- 解决分频模块modelsim下仿真输出为stx的错误
- 192. Word Frequency。
- freemarker中include与import的区别
- Jquery之选项卡效果
- Spring IOC原理
- POJ 3624 Charm Bracelet
- 接口、类
- sqlite3学习笔记
- 百度云的高速下载技巧系列4---Village（原名山寨云）（安卓）
- hibernate 一级缓存（Session缓存）和持久化对象的四种状态
- UVA 624 CD
- PAT (Advanced) 1005. Spell It Right (20)
