精华内容
下载资源
问答
  • js tab切换效果

    千次阅读 2010-10-11 16:36:00
    <html><br /><head><br /> <title>tab</title><br /> <style type="text/css"><br /> body  {  margin-top: 0px;  margin-left: 0px;  margin-bottom: 0px;  margin-right:

    <html>
    <head>
        <title>tab</title>
        <style type="text/css">
            body
            {
                margin-top: 0px;
                margin-left: 0px;
                margin-bottom: 0px;
                margin-right: 0px;
            }
            .scroll
            {
                border: 2px solid #ccc;
            }
            .tabdiv
            {
                width: 716px;
            }
            .tabHead
            {
                height: 35px;
            }
            ul.tabul
            {
                margin: 0px;
                padding: 0px;
                height: 35px;
            }
            ul.tabul li
            {
                list-style-type: none;
                margin: 0px;
                float: left;
            }
            ul.tabul li a, ul.tabul li a:visited
            {
                display: block;
                text-decoration: none;
                background: url('images/blue2.jpg') -424px 0px;//默认情况下的图片,根据自已的需要时行修改
                background-repeat: no-repeat;
                width: 130px;
                height: 35px;
                line-height: 35px;
                text-align: center;
            }
            ul.tabul li a:hover
            {
                /*background:url('images/blue2.jpg') -424px -70px;*/
                background-repeat: no-repeat;
            }
            .tabContent
            {
                border-left: 1px solid #ccc;
                border-right: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            ul.tabul li a.selected
            {
                background: url('images/blue2.jpg') -424px -70px;//tab切换时的图片,根据自已的需要时行修改
                background-repeat: no-repeat;
            }
            li.last
            {
                width: 456px;
                height: 33px;
                border-bottom: 1px solid #ccc;
            }
        </style>
        <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>//借助了jquery
    </head>
    <body>

      <div class="tabdiv">
            <div class="tabHead">
                <ul class="tabul">
                    <li><a href="#" class="selected">我的电脑</a></li><li><a href="#">我的新闻</a></li><li class="last"></li>
                </ul>
            </div>
            <div class="tabContent">
                我的电脑
            </div>
            <div class="tabContent">
                我的新闻
            </div>
        </div>
        <script language="javascript" type="text/javascript">
            function bindEvent() {//tab切换
                $("div.tabContent").each(function (i, n) { if (i == 0) return true; else { $(this).hide(); } });
                $(".tabHead>ul>li>a").each(function (i, n) {
                    var numb = i;
                    $(this).bind("mouseover", function () {
                        $(".tabHead>ul>li>a").each(function () {
                            if ($(this).hasClass("selected")) {$(this).removeClass("selected"); $("div.tabContent").each(function (a, k) { if (a == numb) { $(this).show(); } else { $(this).hide(); } }); return false;}});
                        $(this).addClass("selected");
                    });
                });
            }
            bindEvent();
        </script>
    </body>
    </html>

    background: url('images/blue2.jpg') -424px 0px;// blue2.jpg图片上传的附件中

     

    展开全文
  • js实现tab切换效果

    2020-10-20 09:56:56
    本文主要分享了js封装一个tab切换效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要介绍了js实现的tab标签切换效果,功能非常简单,实现了点击切换的效果,推荐给大家,有需要的小伙伴可以参考下。
  • Vue.js实现tab切换效果

    2020-10-16 15:56:59
    主要为大家详细介绍了Vue.js实现tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JS TAB切换 多个效果的源码

    热门讨论 2013-03-18 09:51:04
    5个tab切换效果的源码: 360度旋转tab标签切换内容 js实现Tab标签切换源码 JS实现竖向滑动菜单 多种不同方向风格的tab标签切换效果 竖向tab标签滑动门选项卡
  • 实用的TAB切换效果js切换,应用广泛,简单易懂,方便快捷
  • 如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的 今天无聊,...
  • 主要介绍了很棒的js Tab选项卡切换效果,简单的选项卡切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • js多重嵌套tab切换效果
  • 前言:平常,我们游览网站的时候,经常会看见tab标签的切换效果,tab切换效果在前端UI框架中也是很常见的。这次,我们在vue项目中,实现一下这个tab切换效果。 tab的切换,一般是点击上方的标题,下方的内容块随之...

    前言:平常,我们游览网站的时候,经常会看见tab标签的切换效果,tab切换效果在前端UI框架中也是很常见的。这次,我们在vue项目中,实现一下这个tab切换效果。

              tab的切换,一般是点击上方的标题,下方的内容块随之切换,上方的标题栏和下方的内容块是并列的关系,通过标签一一对应,点击相对应的标签id,来实现对应tab的切换。

    一、HTML结构

           tab切换第一步先要把html结构写好,搭建页面布局,主要分为两块结构:

    <div id="app">
        <ul class="tab-tilte flex_cen">
            <li @click="cur=0" :class="{active:cur==0}" class="cgBox_l">分钟</li>
            <li @click="inquiryHour(cur=1)" :class="{active:cur==1}" class="cgBox_ll">小时</li>
            <li @click="inquiryDay(cur=2)" :class="{active:cur==2}" class="cgBox_ll">每日</li>
            <li @click="inquiryTotal(cur=3)" :class="{active:cur==3}" class="cgBox_r">汇总</li>
        </ul>
        <div class="tab-content">
            <div v-show="cur==0">
                <table>
                    <tbody>
                        <tr style="background-color:#81b5fe;color:#fff;height:40px;">
                            <td width="25%">开始时间</td>
                            <td width="25%">结束时间</td>
                            <td width="25%">当日<br>件数</td>
                            <td width="25%">当日<br>保费</td>
                        </tr>
                        <tr v-for="item in list1" :key="item.id" class="cellTr">
                            <td>{{item.transDate+''+item.beginTime}}</td>
                            <td>{{item.transDate+''+item.endTime}}</td>
                            <td>{{item.polnumByMinute}}</td>
                            <td>{{item.premByMinute}}</td>
                        </tr>
                    </tbody>
                </table> 
            </div>
            <div v-show="cur==1">
                <table>
                    <tbody>
                        <tr class="trFirst" style="height:40px;">
                            <td width="25%">开始时间</td>
                            <td width="25%">结束时间</td>
                            <td width="25%">当日<br>件数</td>
                            <td width="25%">当日<br>保费</td>
                        </tr>
                        <tr v-for="item in list2" :key="item.index" class="cellTr">
                            <td>{{item.transDate+''+item.beginTime}}</td>
                            <td>{{item.transDate+''+item.endTime}}</td>
                            <td>{{item.polnumByHour}}</td>
                            <td>{{item.premByHour}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-show="cur==2">
                <table>
                    <tbody>
                        <tr style="background-color:#81b5fe;color:#fff;height:40px;">
                            <td width="33.33%">时间</td>
                            <td width="33.33%">件数</td>
                            <td width="33.33%">保费</td>
                        </tr>
                        <tr v-for="item in list3" :key="item.id" class="cellTr">
                            <td>{{item.transDate}}</td>
                            <td>{{item.polnumByDay}}</td>
                            <td>{{item.premByDay}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-show="cur==3">
                <table>
                    <tbody>
                        <tr class="trFirst" style="height:40px;">
                            <td width="50%">当日件数</td>
                            <td width="50%">当日保费</td>
                        </tr>
                        <tr v-for="item in list4" :key="item.index" class="cellTr">
                            <td>{{item.polnumTotal}}</td>
                            <td>{{item.premTotal}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    二、script部分

    <script>
    export default{
    created(){
    //分钟
        this.GLOBAL.get("policy/query/dataReport?reqType=4",'',(res,sta)=> {
            if(sta == 1){
                this.list1 = res.result;
                this.list2 = [];
                this.list3 = [];
                this.list4 = [];
                console.log("请求成功");
            }else if(sta == 0){
                this.GLOBAL.showToast('查询不到,请重试!');
                console.log("请求失败");
            }
        });
    },
    methods:{
    //小时
     inquiryHour(){
        this.GLOBAL.get("policy/query/dataReport?reqType=3",'',(res,sta)=>{
        if(sta == 1){
            this.list2 = res.result;
            this.list3 = [];
            this.list4 = [];
            console.log("请求成功");
        }else if(sta == 0){
            this.GLOBA.showToast('查询不到,请重试!')
            console.log("请求失败");
        }
        });
     },
    //每日
      inquiryDay(){
        this.GLOBAL.get("policy/query/dataReport?reqType=2",'',(res,sta) => {
            if(sta == 1){
                this.list3 = res.result;
                this.list2 = [];
                this.list4 = [];
                console.log("请求成功");
            }else if(sta == 0){
                this.GLOBAL.showToast('查询不到,请重试!');
                console.log("请求失败");
            }
        });
     },
    //汇总
      inquiryTotal(){
        this.GLOBAL.get("policy/query/dataReport?reqType=1",'',(res,sta) =>{
            if(sta == 1){
                this.list4 = res.result;
                this.list2 = [];
                this.list3 = [];
                console.log("请求成功");
            }else if(sta == 0){
                this.GLOBAL.showToast('查询不到,请重试!')
                console.log("请求失败");
            }
        }); 
      },
    },
    mounted(){
    },
    data(){
        return{
         cur:0,
         list1:[],
         list2:[],
         list3:[],
         list4:[],
      };
     },
    };
    </script>

    三、样式部分

    <style scope>
    header>img{display: block;max-width:100%;height:auto;}
    .red{color:red;font-size:16px;padding-left:5px;}
    .totalMon,.total-right{font-weight: bold;font-size: 16px;}
    .dataTitle{margin-bottom:10px;}
    .cgBox_l,.cgBox_r,.cgBox_ll{width: 22%;display: inline-block;height: 34px;line-height: 34px;text-align: center;font-size: 14px;background: #fff;color: #333;border: 1px solid #81b5fe;}
    .cgBox_l {border-top-left-radius: 17px;border-bottom-left-radius: 17px;}
    .cgBox_r {border-top-right-radius: 17px;border-bottom-right-radius: 17px;}
    .tab-tilte .active{background: #81b5fe;color: #fff;}
    .nowDate{text-align: right;padding-top: 15px;display: block;font-size: 16px;}
    table{width:100%;border:1px solid #666;margin-top: 6px;border-spacing: 0;border-collapse: collapse;text-align: center;}
    .input-line{height: 30px;margin-bottom: 10px;}
    .trFirst{background-color:#81b5fe; color:#fff;}
    .tr-total{color:red;font-weight: bold;}
    tr:nth-child(2n){background:#e0ecfb;}
    td{border: 1px solid #ccc;}
    .cellTr{height:30px;}
    </style>

    四、tab切换效果改进语优化

           (1)可以发现当标题和内容不断增多时,我们要不停的添加cur的索引值,因此,有必要改进一下代码的写法;

           (2)利用vue提供的v-for指令遍历得到索引和值,如下所示:

    <div id="app">
        <ul class="tab-list">
            <li v-for="(title,index) in tabTitle" @click="cur=index" :class="{active:cur==index}">{{title}}</li>
        </ul>
        <div class="tab-content">
            <div v-for="(m,index) in tabMain" v-show="cur==index">{{m}}</div>
        </div>
    </div>
    <script type="text/javascript">
    window.onload = function(){
        var app = new Vue({
          el:'#app',
          data:{
            tabTitle:['标题一','标题二','标题三','标题四'],
            tabMain:['内容一','内容二','内容三','内容四'],
            cur:0 //默认选中第一个tab
        }
        })
    }
    </script>

    相关图片:

      

    参考博客:09Vue.js实现tab切换效果--简书 https://www.jianshu.com/p/52441745d769

    如上如有问题,欢迎留言指正,谢谢。

    版权声明:本文为博主原创文章,未经博主允许不得转载 。

     

    展开全文
  • 主要介绍了JS封装的选项卡TAB切换效果,结合实例形式分析了javascript响应鼠标事件动态操作页面元素属性实现tab切换的相关技巧,需要的朋友可以参考下
  • 看了此文(YUI实现的Tab 切换),有感而发,写了一个tab切换的函数,做学习之用。原生js实现,因为框架不好玩。
  • 本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考,具体如下:效果图如下:完整实例代码:/p>"http://www.w3.org/TR/html4/loose.dtd">www.jb51.net JS实现的TAB切换#content {width: 400px;height...

    本文实例讲述了JS实现的tab页切换效果。分享给大家供大家参考,具体如下:

    效果图如下:

    679b44d9b847a43099dbafce7d277d69.gif

    完整实例代码:

    /p>

    "http://www.w3.org/TR/html4/loose.dtd">

    www.jb51.net JS实现的TAB切换

    #content {

    width: 400px;

    height: 200px;

    }

    #tab_bar {

    width: 400px;

    height: 20px;

    float: left;

    }

    #tab_bar ul {

    padding: 0px;

    margin: 0px;

    height: 20px;

    text-align: center;

    }

    #tab_bar li {

    list-style-type: none;

    float: left;

    width: 133.3px;

    height: 20px;

    background-color: gray;

    }

    .tab_css {

    width: 400px;

    height: 200px;

    background-color: orange;

    display: none;

    float: left;

    }

    var myclick = function(v) {

    var llis = document.getElementsByTagName("li");

    for(var i = 0; i < llis.length; i++) {

    var lli = llis[i];

    if(lli == document.getElementById("tab" + v)) {

    lli.style.backgroundColor = "orange";

    } else {

    lli.style.backgroundColor = "gray";

    }

    }

    var divs = document.getElementsByClassName("tab_css");

    for(var i = 0; i < divs.length; i++) {

    var divv = divs[i];

    if(divv == document.getElementById("tab" + v + "_content")) {

    divv.style.display = "block";

    } else {

    divv.style.display = "none";

    }

    }

    }

    • tab1

    • tab2

    • tab3

    页面一
    页面二
    页面三

    感兴趣的朋友可以使用本站在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun,测试上述代码运行效果。

    希望本文所述对大家JavaScript程序设计有所帮助。

    展开全文
  • 主要介绍了JS简单实现tab切换效果的多窗口显示功能,可实现响应鼠标事件的文字切换显示效果,涉及javascript页面元素遍历与样式变换相关操作技巧,需要的朋友可以参考下
  • js实现tab切换效果

    2020-10-15 00:11:34
    主要为大家详细介绍了js实现tab切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 下面小编就为大家带来一篇js中常用的Tab切换效果(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
  • 基于jQuery流畅的tab切换效果JS+CSS基于jQuery流畅的tab切换效果JS+CSS基于jQuery流畅的tab切换效果JS+CSS
  • 原生js tab选项卡新闻列表切换效果代码,我们也习惯于称为"滑动门",一般在网站里面,我们可以做一个选项卡的特效,在页面展示新闻信息等,非常适合在企业网站或者门户网站中使用。php中文网推荐下载!
  • js实现tab标签切换效果是一款无需jQuery,原生javascript制作的tab切换效果
  • js实现tab标签切换效果是一款无需jQuery,原生javascript制作的tab切换效果
  • 效果描述: ui设计比较简洁,堪称简陋 因为设计效果已经比较早了 但是其代码还是非常好用,值得推荐的,希望对懒人有所帮助 使用方法: 1、将style.css样式引入到你的网页中 2、将body中的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,431
精华内容 8,172
关键字:

jstab切换效果