Tab 切换效果

今天写的两个小效果都是为了测试我写的单参函数,结果还是有点成功的~~此处是不是想发表情包!

Tab效果很简单,这里我就不赘述了,直接上代码:

html代码:

<div class="content">
    <div class="tab1 cf">
        <ul>
            <li>第一项</li>
            <li>第二项</li>
            <li>第三项</li>
        </ul>
    </div>
    <div class="tab2 cf">
        <div>1111第一项内容</div>
        <div>2222第二项内容</div>
        <div>3333第三项内容</div>
    </div>
</div>

css代码:

.tab1 li{
        float: left;
        width: 98px;
        border:1px solid #f00;
        display: inline-block;
        height: 50px;
    }
.tab2 div{
        border:1px solid #f00;
        width: 300px;
        height: 100px;
    }

js代码:

function tabSwitch(tab){
        var tabBox=tab;
        var tab1Li=tabBox.find(".tab1 li");
        var tab2Div=tabBox.find(".tab2 div");
        tab2Div.hide();
        tabBox.find(".tab1 li:first-child").css("background","#FABB3E");
        tabBox.find(".tab2 div:first-child").show();
        tab1Li.click(function(){
            var index=$(this).index();
            $(this).css("background","#FABB3E").siblings().css("background","#fff");
            tab2Div.eq(index).show().siblings().hide();
        });
        return false;
    }
    tabSwitch($(".content"));//调用tabSwitch函数

好啦,这个就可以多次调用啦~

效果图!!

这么丑大家就不要欣赏了,这个博文也主要不是突出样式的,大家可以根据自己喜欢去改css就好啦!

时间: 2024-11-05 21:46:46

Tab 切换效果的相关文章

CSS3 :target伪类实现Tab切换效果

用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; background: #fff; } #song-info:target, #song-lyricCN:target, #song-lyricEN:target { z-index: 1; } html代码: <div class="song-nav"> <ul class="

CSS3属性之 target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪类实现Tab切换效果</title> <style type="text/css"> p{ bond:li; } .tablis

JavaScript - Tab切换效果

简单Tab切换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&

基于jQuery图片缩放tab切换效果

基于jQuery图片缩放tab切换效果 上图: 主要效果是一个切换的效果,鼠标移动进行效果切换,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗等 预览地址:http://www.qhttl.com/content/view/2014/07/23/jiaoben92/jiaoben92/index.html 基于jQuery图片缩放tab切换效果

css实现tab切换效果

<div class="match-instruction"> <div id="tab2" class="mi-cont">奖项设置</div> <div id="tab3" class="mi-cont">评审标准</div> <div id="tab4" class="mi-cont">活动

实用CSS3属性之 :target伪类实现Tab切换效果

CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支持: 不支持IE8及以下的IE版本,IE9支持这个属性,其它非IE内核浏览器如:Firefox.Chrome.等这些浏览器都支持. 用法: :target伪类与:hover.:link.:visited.:focus等伪类的用法一样 :target {color:blue} 实例:CSS3 :tar

jquery写的tab切换效果 非常简单

自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12px;}ul{list-style:none;}ul li a{text-decoration:none; color:#000000;}ul li a:hover{text-decoration:underline; color:#cc0000;}#con{margin:50px auto; width:96

Vue.js实现tab切换效果

利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思路是点击上方的标题,下方的内容随之发生改变,上方和下方用的是两个块,是兄弟节点,所以需要点击tab标题和下方内容一一对应,基予两个模块若下标相同是一个内容实现的. 1.3 tab切换第一步先要把HTML写好,这个第一步很关键,主要分为两块结构 <div id="app"> &l

TranslateAnimation类:位置变化动画类 (类似tab切换效果)

TranslateAnimation类是Android系统中的位置变化动画类,用于控制View对象的位置变化,该类继承于Animation类.TranslateAnimation类中的很多方法都与Animation类一致,该类中最常用的方法便是TranslateAnimation构造方法. [基本语法]public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) 参数说

Tab切换效果(多个参数)

前几天我写了这个切换效果,但是是只传一个值的函数,经过各位大牛的指点发现还是有些问题的,于是经过我不懈的努力,完善了代码: 传递多个参数替代函数里面包含事件这个问题: html代码: 1 <div class="content"> 2 <div class="tab1 cf"> 3 <ul> 4 <li class="tab_li">第一项</li> 5 <li class=&qu