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


    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧。

    此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过事件,您也可以根据自己的实际需求将滑过事件hover改为点击事件click。整体代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>tab标签页/滑动门</title>
    <style>
    *{margin:0;padding:0;font-size:12px;}
    li{list-style:none;}
    .tabs{margin:20px;width:400px;height:250px;}
    .tabs_nav{margin-left:1px;}
    .tabs_nav li{float:left;border:1px solid #ddd;border-bottom:none;width:90px;height:25px;line-height:25px;text-align:center;cursor:pointer;margin-left:-1px;}
    .tabs_nav li.active{background:#ccc;}
    .tabs_content{clear:both;display:none;border:1px solid #ddd;height:200px;padding:10px;}
    </style>
    <script type="text/javascript" src="../../jquery-1.7.1.js"></script>
    </head>
    
    <body>
    <div class="tabs">
      <ul class="tabs_nav">
        <li>商品详情</li>
        <li>商品参数</li>
        <li>商品评论</li>
      </ul>
      <div class="tabs_content">这里是商品详情</div>
      <div class="tabs_content">这里是商品参数</div>
      <div class="tabs_content">这里是商品评论</div>
    </div>
    <script>
    /*
    * tabs 0.1
    * Copyright (c) 2014 tnnyang http://tnnyang.cnblogs.com/
    * Dependence jquery-1.7.1.js
    */ 
    ;(function($){
        $.fn.tabs = function(options){
            //默认参数
            var defaults = {
                tabsContent:'tabscontent',
                Class:'active',
                Event:'hover'
                };
            var opts = $.extend(defaults,options);
            
            this.each(function(){
                var obj = $(this);
                var $content = opts.tabsContent, $class = opts.Class, $event = opts.Event;
                obj.find("li").first().addClass($class);
                obj.children($content).first().show();
                obj.find("li").on($event,function(){
                    $(this).addClass($class).siblings().removeClass($class);
                    var $index = obj.find("li").index(this);    
                    $(this).parent().siblings(opts.tabsContent).eq($index).show().siblings(opts.tabsContent).hide();            
                    });
                });
            };
        })(jQuery)
    </script>
    <script>
    $(function(){
        $(".tabs").tabs({
            tabsContent:'.tabs_content',  //设置滑动门的详情
            Class:'active'
            });
        })
    </script>
    </body>
    </html>

     原生js实现方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        li{list-style:none;}
        #tabs{width:300px;margin:50px;border:1px solid #ddd;}
        #tabs ul{overflow:hidden;margin-bottom:10px;}
        #tabs li{float:left;width:100px;margin-left:33px;height:35px;line-height:35px;text-align:center;border-bottom:2px solid #999;cursor:pointer;}
        #tabs li.active{border-bottom:#f00 2px solid;}
        .tabs_con{margin:0 33px;display:none;}
        .tabs_con.active{display:block;}
    </style>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li class="active">周排行</li>
                <li>月排行</li>
            </ul>
            <div class="tabs_con active">这里是周排行</div>
            <div class="tabs_con">这里是月排行</div>
        </div>
    <script>
        window.onload = function(){
            //标题中的 li
            var lis = document.getElementById("tabs").getElementsByTagName("li");
            //给标题中的所有li 添加事件
            for(var i = 0;i<lis.length;i++){
                lis[i].num = i;   //当前是第几个 li
                lis[i].onclick=function(){                
                    var k = this.num  //当前的li是第几个
                    //内容中的 div块
                    var divs = document.getElementsByClassName("tabs_con");
                    //把所有的div消失并去掉所有li标签的class
                    for(var j = 0;j<divs.length;j++){
                        divs[j].style.display = "none";
                        lis[j].className = "";
                        }
                    //显示指定的div并给当前的li标签添加class
                    divs[k].style.display = "block";
                    this.className = "active";
                    };
                };
            };
    </script>
    </body>
    </html>
  • 相关阅读:
    Windows下MarialDB使用
    线程同步synchronized和ReentrantLock
    4种事务特性,5种隔离级别,7种传播行为
    Spring bean的作用域
    java经典30笔试题
    finally中的return
    springboot中Controller没有被扫描
    面试如何回答优化数据库
    Windows定时任务没有执行
    .Net应用程序打包部署总结
  • 原文地址:https://www.cnblogs.com/tnnyang/p/4744482.html
一二三 - 开发者的网上家园