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

时间：2022-01-03 10:01:18

该插件乃本博客作者所写，目的在于提升作者的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>

相关文章