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/ ...
随机推荐
- NULL & nil & Nil & NSNULL的区别
nil 是 OC 的,空对象,地址指向 空(0) 的对象 在 OC 中,可以给空对象发送任何消息,不会出现错误 NULL 是 C 的,空地址,地址的数值是 0,是一个长整数 表示地址是空 NSNull ...
- Windows Server 2008 R2 IIS重装
背景描述: 在一个刚睡醒午觉后的下午,忽然收到客户反馈,说昨天开始应用特别卡,各种卡各种不好用,忽然想到上次说要优化服务器IIS配置还一直没弄,然后迷迷糊糊的就开始进行客户现场服务器IIS配置优化,涉 ...
- HDU 1070 - Milk
给每种牛奶价格和量 要求买最便宜的牛奶 #include <iostream> using namespace std; int t,n; ][]; ],v[]; int main() { ...
- 在vs.net c#中添加mysql模型
http://weblogs.asp.net/gunnarpeipman/getting-mysql-work-with-entity-framework-4-0 http://dev.mysql.c ...
- 1分钟快速生成用于网页内容提取的xslt
1,项目背景 在<Python即时网络爬虫项目说明>一文我们说过要做一个通用的网络爬虫,而且能节省程序员大半的时间,而焦点问题就是提取器使用的抓取规则需要快速生成.在python使 ...
- How Many Tables--hdu1213(并查集)
How Many Tables Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- 【测试技术】ant中的for循环用法
有的时候,我们希望ant中也能类似脚本语言一样进行for循环,以实现一些重复性工作.由于ant核心包并未提供此功能,所以需要下载一个扩展包扔到ant的lib目录下去.详细步骤如下: 1.下载核心包:a ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- Android下EditText中的字体不统一问题
Android下EditText中的字体不统一问题 好久没写,今天心情好略记下解决的某bug 在一个登录界面有帐号和密码两个EditText,但是却发现两个EditText的hint的英文字体不同,看 ...
- 14.3.5 LOCK TABLES and UNLOCK TABLES Syntax
14.3.5 LOCK TABLES and UNLOCK TABLES Syntax LOCK TABLES tbl_name [[AS] alias] lock_type [, tbl_name ...