<!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. windows版本免安装redis, nginx, zookeeper

    redis官网:https://redis.io/ windows版本免安装redis下载链接:https://github.com/MSOpenTech/redis/releases nginx官网 ...

  2. http和socket之长连接和短连接区别（转）

    TCP/IP TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层. 在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议. 在传输层中有TCP协议与UDP协议. 在应 ...

  3. PHP获取当前文件路径

    __FILE__ 是当前路径+文件名dirname(__FILE__)返回当前文件路径的路径部分 例如当前文件是 /home/data/demo/demo.php ,则 __FILE__ 得到的就是完 ...

  4. yum基本用法与修改源

    一.yum简介 yum,是Yellow dog Updater Modified的简称,起初是由yellow dog这一发行版的开发者Terra Soft研发,用python写成,那时还叫做yup(y ...

  5. fastdfs 上传和下载 有用

    一.FastDFS解决什么样的问题 1.存储空间可扩展. 2.提供一个统一的访问方式. 使用FastDFS,分布式文件系统.存储空间可以横向扩展,可以实现服务器的高可用.支持每个节点有备份机. 二.什 ...

  6. mac上，sudo启动IDEA

    cd /Applications/IntelliJ IDEA 14.app/Contents/MacOS sudo ./idea # 就是这个启动,我一开始没有找到这个启动项...这样你就能运行80端 ...

  7. Windows查看端口占用及杀掉进程

    "到底是谁占用了80端口,该怎么查,怎么终止它?",这里就简单讲解一下,在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.这里主要是用到windows下的D ...

  8. code1064 虫食算

    dfs搜索每个字母对应的数字 剪枝: 1.当一列上三个数a b c都已知时,如果 (a+b)%n!=c && (a+b+1)%n!=c 剪枝(+1是考量进位,注意&&) ...

  9. 【转】Comprehensive learning path – Data Science in Python

    Journey from a Python noob to a Kaggler on Python So, you want to become a data scientist or may be ...

  10. HBase中的TTL与MinVersion的关系

    HBase版本:1.3.1 TTL(Time-To-Live):每个Cell的数据超时时间(当前时间 - 最后更新的时间) MinVersion:如果当前存储的所有时间版本都早于TTL,至少MIN_V ...