现在来一个小练习，就是用js实现多tab之间的切换：

<body>

        <ul id="tab">

            <li id="tab1">10元套餐</li>

            <li id="tab2">20元套餐</li>

            <li id="tab3">30元套餐</li>

        </ul>

        <div id="container">

            <div id="content1">

                10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟

            </div>

            <div id="content2" style="display: none">

                30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟

            </div>

            <div id="content3" style="display: none">

                50元包月详情：<br/>&nbsp;每月无限量随心打

            </div>

        </div>

    </body>

对应的css格式如图：

<style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            #tab>li {

                float: left;

                list-style: none;

                width: 80px;

                height: 40px;

                text-align: center;

                line-height: 40px;

                cursor: pointer;

                border: 1px gray solid;

                border-collapse: collapse;

            }

            #tab>li:nth-child(1) {

                border-top-left-radius: 10px;

                border-bottom-left-radius: 10px;

            }

            #tab>li:nth-last-child(1) {

                border-top-right-radius: 10px;

                border-bottom-right-radius: 10px;

            }

            #content1,

            #content2,

            #content3 {

                width: 300px;

                height: 100px;

                padding: 30px;

                position: absolute;

                top: 40px;

                left: 0px;

                border-radius: 10px;

            }

            #tab1,

            #content1 {

                background: orangered;

            }

            #tab2,

            #content2 {

                background: pink;

            }

            #tab3,

            #content3 {

                background: deeppink;

            }

        </style>

效果图：

js实现的结果：

<script src="../../../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        $(function() {

            var currentindex = 0;

            var $contents = $("#container>div");

            $("#tab>li").click(function() {

                $contents[currentindex].style.display = "none";

                var index = $(this).index();

                $contents[index].style.display = "block";

                currentindex = index;

            })

        })

    </script>

可以实现正常的切换了。

多tab点击切换的更多相关文章

  1. $工具, 属性, TAB点击切换

    $工具方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...

  2. jquery tab点击切换的问题

    问题: 页面结构见下 <div id="wrap"> <li> <a href="#" class="active&qu ...

  3. jQuery_$方法、属性、点击切换

    jQuery_$方法 1.$.each():遍历数组或对象中的数据 2.$.trim():去除字符串两边的空格 3.$.type(obj):得到数据的类型 4.$.isArray(obj):判断是否为 ...

  4. Python3从零开始爬取今日头条的新闻【四、模拟点击切换tab标签获取内容】

    Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...

  5. JavaScript banner轮播 左右切换 圆点点击切换

    1.效果如下图: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. jquery——左右按钮点击切换一组图片功能

    一.最终效果 二.功能分析 1.需求分析 点击左边pre按钮,显示前面三个图片,点击右边的next按钮,显示后面的一组(三个)图片.初始化只显示next按钮,到最后一组只显示pre按钮,中间过程两按钮 ...

  7. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

  8. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  9. 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug

    转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...

随机推荐

  1. Ruby中Enumerable模块的一些实用方法

    我在查看 Array 类和 Hash 类的祖先链的时候都发现了 Enumerable,说明这两个类都mixin了Enumerable模块.Enumerable模块为集合型类提供了遍历.检索.排序等方法 ...

  2. LFS搭建第一天

    1. 前期准备 vmware 软件安装 LFS iso 下载:http://ftp.osuosl.org/pub/lfs-livecd/lfslivecd-x86-6.3-r2145.iso 2.新建 ...

  3. 基于EasyX库的贪吃蛇游戏——C语言实现

    接触编程有段时间了,一直想学习怎么去写个游戏来练练手.在看了B站上的教学终于可以自己试试怎么实现贪吃蛇这个游戏了.好了,废话不多说,我们来看看如何用EasyX库来实现贪吃蛇. 一.准备 工具vc++6 ...

  4. 为树莓派添加一个强实时性前端[原创cnblogs.com/helesheng]

    树莓派是最近流行嵌入式平台,其自由的开源特性以及低廉的价格,吸引了来 自全球的大量极客和计算机大咖的关注.来自各大树莓派社区的幕后英雄,无私地在这个开源硬件平台上做了大量的工作,将其打造成了世界上通用 ...

  5. java入门---循环结构 - for, while 及 do...while&break&continue

        顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构.Java中有三种主要的循环结构: while 循环 do…while 循环 for 循环     在Jav ...

  6. 20155305《信息安全系统设计基础》10月18日课堂 fork，exic，wait

    20155305<信息安全系统设计基础>10月18日课堂 fork,exic,wait fork()函数 1.fork函数作用 一般来讲, 我们编写1个普通的c程序, 运行这个程序直到程序 ...

  7. 第四篇 Postman之Pre-request Script（前置处理器:JS之 YYYY-MM-DD HH:MM:SS）

    本篇来讲讲Pre-request Script 前置处理器,定义在发送request之前需要运行的一些脚本,应用场景主要是设置全局变量和环境变量. 本例子也是项目中遇到的,需要修改与客户的预约时间,但 ...

  8. mnist手写数字识别(神经网络)

    import numpy as np from sklearn.neural_network import MLPClassifier path = 'mnist.npz' f = np.load(p ...

  9. vue 跳转到外部 后回跳

    微信  vue 跳转到外部 后回跳  ,比如登陆 授权操作 .需要 路由 先跳转到一个中间页面 后再跳转到授权服务器!而不能跳转前的页面与回跳后的页面相同 不然回跳可能会出现空白 路由不解析.

  10. Linux虚拟机centos系统安装

    linux 其他知识目录 安装完后如果虚拟机网络不通请参考:虚拟机网络不通故障解决 1.centos6.9安装 后面安装出了点问题,ip没有并且eth0网卡找不到,不过重新配置ifcfg-eth0后重 ...