<!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. 中文分词工具jieba中的词性类型

    jieba为自然语言语言中常用工具包,jieba具有对分词的词性进行标注的功能,词性类别如下: Ag 形语素 形容词性语素.形容词代码为 a,语素代码g前面置以A. a 形容词 取英语形容词 adje ...

  2. cdoj1088-王之迷宫 （三维迷宫最短路径）【BFS】

    http://acm.uestc.edu.cn/#/problem/show/1088 王之迷宫 Time Limit: 3000/1000MS (Java/Others)     Memory Li ...

  3. mysql sql left right inner join区别及效率比较

    一．Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ON conditiona table1 ...

  4. ssh的发展历程与基本原理

    一.ssh是什么 SSH(Secure Shell)是一个提供数据通信安全.远程登录.远程指令执行等功能的安全网络协议,最初提出目的是替代非安全的Telnet.rsh.rexec等远程Shell协议. ...

  5. 天云CloudStack 改进版

    整体风格   创建区域

  6. spring4-4-jdbc-01

    1.建立数据属性文件db.properties jdbc.user=root jdbc.password=root jdbc.driverClass=com.mysql.jdbc.Driver jdb ...

  7. C#根据URL生成签名

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Security.Cryptog ...

  8. SQL Pretty Printer不错的sql格式化工具

    之前使用过sql server 2000的查询设计器和Toad for oracle 都有格式化Sql语句的功能,感觉很方便,尤其对于我这种有着轻微强迫症的人来说.当最近把SQL Server Man ...

  9. 文件操作getc

    getc函数的作用是从打开的文件中获取一个字符,并加文件指针自动加1,获取的字符在返回值中. 我写了一个读取一个文件255个字节的程序. int main() { FILE *p; fopen_s(& ...

  10. [C++] Const Summary (mind map)

    Const Summary