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/ ...
随机推荐
- Spring整合Hibernate 二 - 声明式的事务管理
Spring大战Hibernate之声明式的事务管理 Spring配置文件: 添加事务管理类的bean: <bean id="txManager" class="o ...
- UVa 11488 - Hyper Prefix Sets
找 前缀长度*符合该前缀的字符串数 的最大值 顺便练了一下字典树的模板 #include <iostream> #include <cstdio> #include <c ...
- pom文件详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
- 在controller间分享数据（第一种办法）
Blood 血腥的方法 每个controller都有自己的scope, 同时也可以共享他们老爸的scope内的数据.如果我们想让两个controller共享数据的化, 有多种方法. 最直接血腥的就是在 ...
- AngularJS 之Services讲解
Angular带来了很多类型的services.每个都会它自己不同的使用场景.我们将在本节来阐述. 首先我们必须记在心里的是所有的services都是singleton(单例)的,这也是我们所希望得到 ...
- URL 操作
1.$.param()将对象键值对转换为 URL 字符串键值对 var obj = { name : 'Lee', age : 100 }; alert($.param(obj));
- cocos2dx工程中接入支付宝sdk
1. 首先去支付宝官网下载开发者文档 2. 然后按着开发者文档将支付宝的sdk导入到你的工程中,并关联到工程中,步骤入下图: (1)将从支付宝官方网站获得的支付宝的sdk的jar包拷贝到工程中的lib ...
- 钱币兑换问题（hd1284）
钱币兑换问题 在一个国家仅有1分,2分,3分硬币,将钱N兑换成硬币有很多种兑法.请你编程序计算出共有多少种兑法. Input 每行只有一个正整数N,N小于32768. Output 对应每个输 ...
- avd name对AVD的创建的影响
创建avd的时候出现OK按钮显示灰色不可按状态,各种系数都显示对的.如下所示: 检查了各项觉得没有什么错,最后原来出错在AVD的name上面,不允许有空格或者非英文字母,把空格取消之后就没有问题了.
- 复习完毕STM32开发板
经过半个晚上的折腾,终于复习了STM32开发板,并使用ST官方库调试完毕一个printf重定向到串口的程序,3.5的库同以前的库不大一样,不过最终搞好了可以睡觉了,还可以睡7个小时. ...