简单实现tab标签页切换

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>    <style>        *{            margin:0px;            padding:0px;            list-style: none;        }        .main{            width:500px;            height:500px;            margin:auto;            margin-top:100px;

        }        .tab{            overflow:hidden        }        .tab li{            float:left;            width:100px;            height:30px;            border:1px solid #76b4ff;            border-bottom:none;            margin-right:5px;        }        .tab li:hover{            font-weight:bold;">#7EC4CC;            color:white;        }        .check{            font-weight:bold;">#7EC4CC;            color:white;        }        .content{            border:1px solid #76b4ff;            height:200px;            width:500px;        }        .content li{

        }        .hidden{            display:none;        }    </style></head><body><div class="main">    <div class="tab">        <ul>            <li>new</li>            <li>text</li>            <li>pic</li>        </ul>    </div>    <div class="content">        <ul>            <li>我是第一页</li>            <li>我是第二页</li>            <li>我是第三页</li>        </ul>    </div></div></body><script>    $(".tab li").click(function(){        $(".tab li").removeClass("check");        $(".content li").addClass("hidden");        $(this).toggleClass("check");        var num=$(this).index();        switch(num){            case 0:                $(".content li:eq("+num+")").removeClass("hidden");                break;            case 1:                $(".content li:eq("+num+")").removeClass("hidden");                break;            case 2:                $(".content li:eq("+num+")").removeClass("hidden");                break;        }    });</script></html>

时间： 2024-10-14 12:30:23

简单实现tab标签页切换的相关文章

简单说说tab标签页和轮播图

准确的来说,一个页面能够独立的做出轮播图才算是刚步入前端世界.说轮播图之前先来说说标签页,.因为它比较简单,我的效果使用jquery来实现的,. 具体代码只有一点点,. var timeout; $(document).ready(function(){ $("#tabfirst li").each(function(index){ var liNode=$(this); liNode.click(function(){ timeout=setTimeout(function(){ $

Vue实现简单Tab标签页组件

Tab 标签页组件基础用法默认情况下启用第一个标签,可以通过v-model绑定当前激活的标签索引 <tabs v-model="active"> <tab title="标签 1">内容 1</tab> <tab title="标签 2">内容 2</tab> <tab title="标签 3">内容 3</tab> </van-ta

Tab标签页接口（1）

Tab标签接口的用简单的应用是把不同的标签页的接口组件集中放在同一个接口布局文件,而且程序代码也会集中放在主类的程序文件中.这种方法的好处就是项目中的文件数目不会增加,但是如果Tab标签的接口组件个数比较多,或者是程序代码比较复杂,把它们集中放在同一个文件会造成日后程序维护上的困难.我们已经学习过Intent对象的使用方法,这里我们就用Intent对象来建立Tab标签页接口.这个新的方法其实是基于一个很简单的概念,就是每一个Tab标签页都对应到一个独立的Activity类,因此不同标签页的接口布

如何一行jquery代码写出tab标签页（链式操作）

啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en"> <head> <style> *{ padding: 0; margin: 0; } ul{ list-style-type: none; } #ul{ height: 30px; margin-bottom: 10px; } #ul li { height: 30px;

tab标签页四种写法

html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> <meta name="apple-mobile-we

jquery插件之tab标签页或滑动门

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过事件,您也可以根据自己的实际需求将滑过事件hover改为点击事件click.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

Bootstrap插件——(Tab)标签页

项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: 1 <div class="tabbable"> 2 <ul class="nav nav-tabs"> 3 <li class="active"><a href="#第一个id" data-toggle="tab">选项一</a></li> //第一个选项,

整理用js实现tab标签页

首先是css样式,比如这样的: 1 <style> 2 *{ 3 margin:0; 4 padding: 0; 5 list-style: none; 6 font-size: 12px; 7 } 8 .notice{ 9 width: 298px; 10 height: 98px; 11 margin: 10px; 12 border:1px solid #7c7c7c; 13 overflow: hidden; 14 } 15 .notice-tit{ 16 height: 27px;

web前端中实现多标签页切换的效果

在这里,实现多标签页效果的方法有两个,一个是基于DOM的,另一个是基于jquery的,此次我写的是一个对于一个电话套餐的不同,显示不同的标签页方法一: 首先,我们要把页面的大体框架和样式写出来,html和css代码如下: <ul id="tab"> <li id="tab1" onclick="show(1)">10元套餐</li> <li id="tab2" oncli