jquery精简选项卡
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">
*{padding: 0;margin: 0}
#tab{width: 400px; height: 400px; position: absolute;left: 50%;top:50%;margin: -200px 0 0 -200px;}
.tab_menu{width: 300px;height: 30px; margin: auto}
ul{list-style: none}
ul li{ float: left;width: 70px; height: 30px;margin-right: 10px;;color: #ccc;text-align: center;line-height: 30px;}
.tab_box{width: 300px;height: 150px;margin:auto;border: 1px dotted rosybrown;}
.hide{display: none}
.selected{background-color: royalblue}
</style>
<script type="application/javascript">
$(function(){
$("ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected"); //给当前对象添加高亮并且它的兄弟对象删除高亮样式
var index=$("ul li").index(this); //获取当前对象索引
$(".tab_box>div")
.eq(index).show() //显 示<li>元素对应的<div>元素
.siblings().hide(); //并让其他<div>元素隐藏
});
});
</script>
<body>
<div id="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>娱乐</li>
<li>政治</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">娱乐</div>
<div class="hide">政治</div>
</div>
</div>
</body>
</html>
jquery精简选项卡的更多相关文章
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- jquery制作选项卡
思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...
- jQuery的选项卡
jQuery的选项卡 下面请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- 面向对象和面向过程的jquery版选项卡
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- Jquery tab 选项卡 无刷新切换
转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...
- jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
- jquery之选项卡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- Android开发_关于如何屏蔽Home键
今天在遇到一个要屏蔽Home键的问题,研究一上午终于解决,方法记录于下: 在Android2.3版本以下重写以下方法就能屏蔽Home键: public void onAttachedToWindow( ...
- 【SSH进阶之路】Hibernate基本原理（一）
在开始学Hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎 ...
- [转]标准C++字符串string以及MFC6.0字符串CString的tokenize和split函数
标准字符串的方法: /******************************************** the tokenize function for std::string ****** ...
- 京东UED招聘web前端开发工程师（中/高级）
工作职责: 负责前端界面的构建和各类交互设计与实现: 前端样式和脚本的模块设计及优化: 协同后台开发人员完成项目: 负责新产品开发线前端工作(新产品.垂直站.移动端 .后端系统),可根据个人喜好及特长 ...
- HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...
- how to create virtual network in OS X 10.9
ifconfig lo0 alias 172.16.123.1 will add an alias IP 172.16.123.1 to the loopback adapter sudo ifcon ...
- MVC4商城项目二：用户身份验证的实现
用户身份验证,依赖于 forms 身份验证类:FormsAuthentication,它是一串加密的cookie 来实现对控制器访问限制和登陆页面的访问控制.它在浏览器端是这样子的: 需求:我们要实现 ...
- js 获取浏览器内核
<script language="JavaScript" type="text/javascript"> var browser = { ...
- SharedPreference对象及其xml文件
SharedPreferences对象----->getXXX SharedPreferences.Editor对象---->putXXX
- 厂商自定义USB设备类概述
USB协会将常用具有相同/相似功能的设备归为一类,并制定了相关的设备类规范,这样就能保障只要依照同样的规范标准,即使不同的厂商开发的USB设备也可以使用同样的驱动程序,而且操作系统中无须为每种设备提供 ...