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 学习笔记（一）
环境配置在网上搜索的一大堆. 这里简单发几个连接. http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html http://jing ...
- 检查DISPLAY设置时Xlib出现No protocol specified错误
退出到root用户,执行xhost +命令后,再次切换到Oralce用户,执行runInstaller命令,错误消失
- Mac下Apache服务器配置
一.Apache服务器 1. 使用最广的 Web 服务器 2. Mac自带,只需要修改几个配置就可以,简单,快捷 3. 有些特殊的服务器功能,Apache都能很好的支持 目的:让有一个自己专属的测试环 ...
- node.js入门（二） 第一个程序 Hello World
新建一个名为"hello.js"文本文件,然后输入如下内容 //载入http模块 var http = require('http'); //构建一个http服务器 var ser ...
- Java、Tomcat 及 MySQL 环境配置
Java开发环境的配置 首先我们要下载JDK. 到Oracle官网上去下载即可,目前最新版是Java SE 8u25. 开始我很混乱,Java SE 和 JDK是什么关系呢?最后查了一下 Java S ...
- php微信公众帐号发送红包
开发框架为we7 所需参数:appid,appSecret,MchId,API密钥 <?php /** * 微信红包的类 * */ CLASS WXHongBao { private $mch_ ...
- python针对于mysql的增删改查
无论是BS还是CS得项目,没有数据库是不行的. 本文是对python对mysql的操作的总结.适合有一定基础的开发者,最好是按部就班学习的人阅读.因为我认为人生不能永远都是从零开始,那简直就是灾难. ...
- python GUI学习——Tkinter
支持python的常见GUI工具包: Tkinter 使用Tk平台 很容易得到 半标准 wxpython 基于wxWindows.跨平台越来越流行 Python Win 只能在Windows上使用 使 ...
- Word Amalgamation（hdoj1113）
Word Amalgamation Problem Description In millions of newspapers across the United States there is a ...
- 轻松背后的N+疲惫——系统日志
相信很多coder都有这样的癖好:“自恋”!!对自己编写的code总是那么的自信,自豪,Always believe it to be so perfect!! 不喜欢做单元测试(总觉得它就那样了能出 ...