- 浏览: 47208 次
文章分类
最新评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
li {
list-style-type: none;
width:50px;
float: left;
}
.tab {
width: 400px;
height: 400px;
border: 1px solid red
}
.tab_menu {
width: 400px;
height: 100px;
border: 1px solid red
}
.tab_box {
width: 400px;
height: 300px;
border: 1px solid red
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
$(".hide").hide();
//单击li时进行高亮显示
$div_li= $("div.tab_menu ul li");
$("div.tab_menu ul li").click(function(){
//当前li高亮,并且去掉其他同辈li元素的高亮显示
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前选中的li所在全部li元素中的索引。
var index= $div_li.index(this);
//选取子节点 ,显示li元素对应的div元素,隐藏其他几个同辈的div元素
$("div.tab_box > div").eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div><img alt="图片找不到" src="images/sjw.png"></div>
<div class="hide"><img alt="图片找不到" src="images/6.jpg"></div>
<div class="hide"><img alt="图片找不到" src="images/1.jpg"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
li {
list-style-type: none;
width:50px;
float: left;
}
.tab {
width: 400px;
height: 400px;
border: 1px solid red
}
.tab_menu {
width: 400px;
height: 100px;
border: 1px solid red
}
.tab_box {
width: 400px;
height: 300px;
border: 1px solid red
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
$(".hide").hide();
//单击li时进行高亮显示
$div_li= $("div.tab_menu ul li");
$("div.tab_menu ul li").click(function(){
//当前li高亮,并且去掉其他同辈li元素的高亮显示
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前选中的li所在全部li元素中的索引。
var index= $div_li.index(this);
//选取子节点 ,显示li元素对应的div元素,隐藏其他几个同辈的div元素
$("div.tab_box > div").eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div><img alt="图片找不到" src="images/sjw.png"></div>
<div class="hide"><img alt="图片找不到" src="images/6.jpg"></div>
<div class="hide"><img alt="图片找不到" src="images/1.jpg"></div>
</div>
</div>
</body>
</html>
发表评论
-
validate自动校验
2016-09-23 15:32 660<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 459jQuery 的选择器可谓之强 ... -
JQuery的extend扩展
2016-09-18 15:23 393JQuery的extend扩展方法: Jquery ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:41 406<!DOCTYPE html PUBLIC " ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 468var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1891jquery对对象数组的遍历的两种方式 data: [ { ... -
query,bootstrap在开发中使用的总结
2016-08-24 09:50 570当ajax请求返回的数据date如上面所显示,要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 739select 初始化值,option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值,option 的value是id,内容 ... -
bootstrap日期插件daterangepicker的使用
2016-08-22 10:59 876今天用的了bootstrap日期插件感觉搜索的资料不是很多在此 ... -
Jquery选择器
2016-08-19 10:08 620JQuery: 一:入门 二:选择器 三:DOM操作 四:事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 512Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 398在www.json.org上公布了很多JAVA下的json ... -
HTML5时钟
2016-08-18 12:31 482本示例使用HTML5的canvas标签和Javascript脚 ... -
同步更新input中的内容
2016-08-16 14:15 505HTML: <div class="form ... -
JQuery验证
2016-08-16 09:46 479js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 472一、用前必备 转载:http://www.cnblogs.c ...
相关推荐
实现选项卡切换功能,功能完善,界面美观,操作方便!
javascript选项卡切换,网页选项卡切换
选项卡切换效果,网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页设计!网页...
javascript选项卡,网页选项卡,JS选项卡
网页效果三例 图片切换 选项卡切换 自己把图片换一下 就可以为自己用了
jQuery选项卡切换特效代码是一款基于jquery-1.7.2.min.js制作的图片选项卡切换效果网页代码。鼠标经过各个选项卡图标菜单,自动进行内容切换,图文并茂,简洁大气,效果不错,横向选项卡,兼容各大主流浏览器。
javascript选项卡自动、手动切换可以兼容所有浏览器。自动切换可以给网页带来更好的效果。
实现效果:不同导航对应切换到不同的区域。点击上面的标题即可实现对应页面的切换功能,非常具有实用价值。
简单纯js实现网页tab选项卡切换效果,简单,实用,方便
仿百度首页+网页背景切换+选项卡悬浮切换
javascript网页中实现选项卡效果特效
三种简洁的Tab导航(网页选项卡) Tab导航 网页选项卡 滑动门 选项卡切换
漂亮实用可左右切换的TAB网页选项卡,两侧都可以控制TAB来回切换,整体的色彩搭配很合适。
网页Tab选项卡延迟切换和自动切换效果
jQuery选项卡切换图片异步加载代码是一款精简的异步加载图片代码,展示图片的网页必备的功能。
简易的html切换选项卡资源,在同一个网页相互切换,而不是跳转,很实用的!
效果描述: ...一套原生js实现的tab选项卡切换效果,纯js,不依赖任何库实现 这个可以用在普通pc客户端,也适用移动mobile手机页面 使用方法: 1、引入css样式 2、将index.html中的代码部分拷贝过去即可
选项卡切换 兼容所有 jquery 动态选项卡,网页中经常用到,给大家分享一个兼容所有的动态选项卡切换特效。
百度首页选项卡切换效果代码基于jquery-1.11.1.min.js制作,鼠标点击文字按钮进行选项卡内容切换。有导航、新闻、世界杯、音乐、彩票等选项卡栏目。