<!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精简选项卡的更多相关文章

  1. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  3. jquery制作选项卡

    思路:点击按钮后,先让所有的按钮的class属性都为“”,所有的div的display样式都为none:再让当前被点击按钮的class属性为active,以及所对应的div的display样式为blo ...

  4. jQuery的选项卡

    jQuery的选项卡 下面请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  5. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  6. 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  7. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  8. jQuery实例—选项卡（js源码和jQuery）【一些常见方法（1）-练习】

    分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  9. jquery之选项卡效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Java Junit4测试功能

    作为一个java新手,有些东西有必要记下来,以便以后方便查看. 为了让自己有养成良好的习惯,新建一个测试的文件夹:test在项目上右击→New→Folder.新建一个test文件夹. 接下来要在你需要 ...

  2. 定时排程刷新微信access-token

    微信公众号开发中最常遇到的就是调用接口时候需要有API的access-token(非网页授权的access-token),有了这个token之后,才可以发生模板消息等.这里的做法主要是用nodejs的 ...

  3. iOS 在特定页面 界面旋转

    1.在AppDelegate.h 里添加标记 2.在AppDelegate.m 里添加这个方法 3.使用 [(AppDelegate*)[UIApplication sharedApplication ...

  4. ThreadPoolExecutor（转）

    让ThreadPoolExecutor的workQueue占满时自动阻塞submit()方法 By learnhard | 2015 年 09 月 04 日 0 Comment 转载请注明出处:htt ...

  5. JSON 日期格式带 T 问题

    var iso = new IsoDateTimeConverter(); iso.DateTimeFormat = "yyyy-MM-dd"; object obj = new  ...

  6. linux学习笔记之线程同步机制

    一.基础知识. 1:线程同步机制:互斥量,读写锁,条件变量,自旋锁,屏障. 1,互斥量:每个进程访问被互斥量保护的资源时,都需要先对互斥量进行判断. 1)互斥量重要属性:进程共享属性,健壮属性,类型属 ...

  7. linux网络编程：三次握手与四次挥手

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 其中三次握手即建立连接 四次挥手则为关闭连接 TCP连接的11种状态 客户端独有的:(1)SYN_SENT (2)FIN ...

  8. 判断浏览器IE6

    <!--[if lte IE 6]><LINK rel="stylesheet" type="text/css" href="ima ...

  9. 调试 JavaScript 脚本

    随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaSc ...

  10. html5属性placeholder的js 向下兼容支持(jquery版)

    placeholder是html5表单特性中比较好用的一条,但是苦于其向下兼容性,所以一般要做向下兼容的站点都不敢用,如果有用到的地方,也是用js简单模拟而实现的,那么有没有一个一劳永逸的方法去解决这 ...