<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin: 0; padding: 0}

        li{list-style: none}

        a{text-decoration: none; color: #333}

        .box{ width: 600px; height: 210px; margin: 50px auto 0; overflow: hidden; }

        .tab_item{float: left; width: 390px; height: 210px; border-right: 1px solid #ddd; background-color: #ddd; }

        .tab_item .tab_content{ height: 210px; text-align: center; line-height: 210px; font-size: 35px; }

        .tab_ui{ float: right; width: 200px; }

        .tab_ui li{ width: 200px; text-align: center; background-color: #C84E69; }

        .tab_ui li a{ display: block; height: 50px; line-height: 50px; margin-bottom: 3px;  color: #fff; font-size: 20px;}

        .tab_ui li.current a{ background-color: #49A945; color: #fff;}

    </style>

</head>

<body>

<div class="box">

    <div class="tab_item" id="tab_item">

        <div class="tab_content">春天的内容</div>

        <div class="tab_content" style="display: none;">夏天的内容</div>

        <div class="tab_content" style="display: none;">秋天的内容</div>

        <div class="tab_content" style="display: none;">冬天的内容</div>

    </div>

    <ul class="tab_ui" id="tab_ui">

        <li class="current"><a href="javascript:;">春</a></li>

        <li><a href="javascript:;">夏</a></li>

        <li><a href="javascript:;">秋</a></li>

        <li><a href="javascript:;">冬</a></li>

    </ul>

</div>

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

        //选项卡

        $(function(){

            //点击li事件

            $("#tab_ui li").click(function(){

                //添加当前状态current，它的同辈元素(siblings)移除当前状态current

                $(this).addClass('current').siblings('li').removeClass('current');

                var z = $(this).index();//索引

                //遍历找到对应的内容显示，同辈元素隐藏

                $("#tab_item .tab_content").eq(z).show().siblings('#tab_item .tab_content').hide();

            });

        })

    </script>

</body>

</html>

效果图：

注意：

若a标签中的href加“#”符号，如图

则，脚本应该多加一句，“return false” 阻止跳转的意思，如图：

选项卡tab2的更多相关文章

  1. Siki_Unity_2-4_UGUI_Unity5.1 UI 案例学习

    Unity 2-4 UGUI Unity5.1 UI 案例学习 任务1-1:UGUI简介 什么是GUI: 游戏的开始菜单 RPG游戏的菜单栏.侧边栏和功能栏(比如背包系统.任务列表等) 设计用来控制移 ...

  2. 转载《Android-TabHost 选项卡功能用法详解》

    一. TabHost介绍 TabHost组件可以在界面中存放多个选项卡, 很多软件都使用了改组件进行设计; 1. TabHost常用组件 TabWidget : 该组件就是TabHost标签页中上部 ...

  3. Android 用Fragment创建一个选项卡

    本文结合之前的动态创建fragment来进行一个实践,来实现用Fragment创建一个选项卡 本文地址:http://www.cnblogs.com/wuyudong/p/5898075.html,转 ...

  4. [转载]ExtJs4 笔记（10） Ext.tab.Panel 选项卡

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  5. Bootstrap页面布局17 - BS选项卡

    代码结构: <div class='container-fluid'> <h2 class='page-header'>Bootstrap 选项卡</h2> < ...

  6. ion-tap选项卡及路由结合ion-tap

    ion-tabs简介 <!DOCTYPE html> <html ng-app="ionic"> <head> <meta name=&q ...

  7. bootstrap-导航、选项卡

    导航: <!-- nav 导航的基础样式 --> <div class="container"> <div class="row" ...

  8. 用js控制选项卡的隐藏与显示

    通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏 <form action="" method="post"> <div&g ...

  9. Android 自学之选项卡TabHost

    选项卡(TabHost)是一种非常实用的组件,TabHost可以很方便地在窗口上放置多个标签页,每个标签页相当于获得了一个与外部容器相同大小的组建摆放区域.通过这种方式,就可以在一个容器中放置更多组件 ...

随机推荐

  1. shell编程——变量子串的常用操作

    ${#字符串} 返回字符串的长度 [root@localhost ~]# a=length [root@localhost ~]# echo ${#a} 6 ${字符串:位置x} 从位置x开始往后截取 ...

  2. python grpc

    pip install grpcio pip install grpcio-tools python -m grpc_tools.protoc -I. --python_out=. --grpc_py ...

  3. O(n)求中位数和第k大数

    解题关键:模板与思路.面试题 #include<cstdio> #include<cstring> #include<algorithm> #include< ...

  4. spring4-4-jdbc-02

    1.简化 JDBC 模板查询 每次使用都创建一个 JdbcTemplate 的新实例, 这种做法效率很低下. JdbcTemplate 类被设计成为线程安全的, 所以可以再 IOC 容器中声明它的单个 ...

  5. 面向对象 继承 抽象类 接口 static 权限修饰符

    Day01 面向对象 继承 抽象类 接口 static 1.匿名对象是指创建对象时,只有创建对象的语句,却没有把对象地址值赋值给某个变量. 2.类的继承是指在一个现有类的基础上去构建一个新的类,构建出 ...

  6. CSS块级元素、内联元素概念[转]

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...

  7. [C++] Returning values by reference in C++

    A C++ program can be made easier to read and maintain by using references rather than pointers. A C+ ...

  8. python实现高效率的排列组合算法-乾颐堂

    组合算法 本程序的思路是开一个数组,其下标表示1到m个数,数组元素的值为1表示其下标 代表的数被选中,为0则没选中. 首先初始化,将数组前n个元素置1,表示第一个组合为前n个数. 然后从左到右扫描数组 ...

  9. 重定向和请求转发后面加“return；”语句

    请求转发  RequestDispatcher 重定向     Redirect 代码的执行: 无论是 request.getRequestDispatcher(path).forward(reque ...

  10. elasticsearch-jdbc 使用

    elasticsearch-jdbc是一个将关系型数据库(RDBMS)数据导入到ElasticSearch库中的一个工具包,支持mysql.oracle.postgrey.csv等存储列式数据的容器. ...