<!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. 网络编程基础之C/S架构和TCP/IP协议

    一.何谓C/S架构 C指的是client(客户端软件),S指的是Server(服务端软件),既然我们的的标题是网络编程基础, 那我们就一起来学习怎样写一个C/S架构的软件,实现服务端与客户端软件基于网 ...

  2. VS2015 create a C++ console application based on WinRT

    1. Enable /ZW 2. Disable /Gm 3. #using C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\vcpack ...

  3. Python与Go选择排序

    #!/usr/bin/env python # -*- coding: utf-8 -*- # 选择排序 # 时间复杂度O(n^2) def selection_sort(array): length ...

  4. CG中的类型

    [Matrix] 通常像下面这样定义Matrix: int1x1 iMatrix; // integer matrix with 1 row, 1 column int4x1 iMatrix; // ...

  5. validator 参数校验的常用注解

    @AssertFalse Boolean,boolean 验证注解的元素值是false @AssertTrue Boolean,boolean 验证注解的元素值是true @NotNull 任意类型 ...

  6. DBArtist之Oracle入门第2步: 了解Oracle的Database Control

    之前安装好数据库后,会有下面这个弹窗,然后根据Database Control URL地址进入瞧一瞧,看一看! 根据地址进入以后,是一个登录界面,用system账户登录,密码就是安装Oracle的时候 ...

  7. 20-list简单使用：

    C++list的使用总结及常用list操作 C++中list用法详解 STL中list的erase()方法的使用   listiterator 最近刚刚接触stl的list    学习的时候遇到了很多 ...

  8. LoadRunner11学习记录七 -- 负载生成器、事务&集合点顺序、HTML&URL录制

    1.什么情况下用到负载生成器? 当需要使用多台测试机对同一服务器同时压力测试时,需要配置负载生成器. 2.LoadRunner中事务和集合点的放置顺序问题 1)事务放在集合点前面 这时事务的时间包含了 ...

  9. [C++] c pointer

    the nature of pointer const keyword const int*  p int const *p int*  const p int const a const int a ...

  10. CNN和GAN 比较nice的介绍

    CNN是个什么鬼:https://www.zhihu.com/question/52668301 就是这样GAN : https://zhuanlan.zhihu.com/p/27199954