jquery选项卡

最新推荐文章于 2021-11-15 23:04:33 发布

lampsunny

最新推荐文章于 2021-11-15 23:04:33 发布

阅读量700

点赞数

分类专栏： html+css Javascript

本文链接：https://blog.csdn.net/lampsunny/article/details/19088079

版权

html+css 同时被 2 个专栏收录

103 篇文章 0 订阅

订阅专栏

Javascript

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery选项卡</title>
<style>
body {
    background-color: #FFF;
    font: 12px/21px Arial;
    margin: 3em;
}
h3 {
    font-size: 16px;
    margin-bottom: 1em;
}
h3 span {
    color: #666;
    font-size: 14px;
    margin-left: 14px;
}
.tags {
    height: 38px;
    list-style: none outside none;
    margin: 0 0 -1px;
    padding: 0;
    position: relative;
}
.tags li {
    background-color: #EAEAEF;
    border: 1px solid #DDD;
    cursor: pointer;
    display: inline;
    float: left;
    margin-right: 6px;
}
.tags li a {
    color: #36C;
    display: block;
    line-height: 36px;
    padding: 0 1em;
    text-decoration: none;
}
.tags li.current {
    background-color: #FFF;
    border-bottom-style: none;
    font-weight: 700;
    height: 37px;
}
.tags li.current a {
    color: #C63;
    outline: none;
}
.panes {
    border: 1px solid #DDD;
    height: 5em;
    margin-bottom: 2em;
    padding: 1em;
}
</style>
</head>

<script src='http://code.jquery.com/jquery.js'></script>
<script>
(function($) {
    // 插件名称 oTabs
    $.fn.oTabs = function(options) {
        // 默认值初始化
        var defaults = {
            // 默认起始显示序列
            dft: 0,
            // 默认事件延迟时间
            htime: 200,
            // 默认鼠标事件
            act: "click"
        };
        // 合并 defaults 和 options 修改并返回 defaults
        var sets = $.extend(defaults, options);
 
        // this 指通过当前选择器获取的 jQuery 对象
        // 选项卡标签
        var tag = $(".tags > li", this);
        // 选项卡内容
        var pane = $(".panes > div", this);
 
        // 起始显示标签
        tag.eq(sets.dft).addClass("current");
        // 起始显示内容
        pane.eq(sets.dft).show().siblings().hide();
 
        // 选项卡切换方法
        function fnTabs(obj) {
            $(obj).addClass("current").siblings().removeClass("current");
            pane.eq($(obj).index()).show().siblings().hide();
        };
 
        function ckTabs() {
            var obj = $(this);
            fnTabs(obj);
            return false;
        }
 
        // 判断是否鼠标划过，默认为鼠标单击
        if (sets.act == "mouseover") {
            var hoverTimer;
            tag.hover(function() {
                var obj = $(this);
                hoverTimer = setTimeout(function() {
                    fnTabs(obj);
                },
                sets.htime)
            },
            function() {
                clearTimeout(hoverTimer);
            });
            tag.click(ckTabs);
        } else {
            tag.click(ckTabs);
        }
    }
})(jQuery);
$(document).ready(function() {
    $("#tabs").oTabs();
    $("#tabs2").oTabs({
        dft: 1,
        // 设置起始显示序列，默认为第一页
        htime: 300,
        // 设置事件延迟时间，默认为延迟200毫秒执行
        act: "mouseover" // 设置鼠标事件，默认为鼠标单击
    });
});
</script>

<body>

<h3>鼠标单击</h3>
<div id="tabs">
  <ul class="tags">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Prototype</a></li>
    <li><a href="#">MooTools</a></li>
  </ul>
  <div class="panes">
    <div>Hello jQuery!</div>
    <div>Hello Prototype!</div>
    <div>Hello MooTools!</div>
  </div>
</div>
<h3>鼠标划过<span>事件延迟300毫秒</span></h3>
<div id="tabs2">
  <ul class="tags">
    <li><a href="#">jQuery</a></li>
    <li><a href="#">Prototype</a></li>
    <li><a href="#">MooTools</a></li>
  </ul>
  <div class="panes">
    <div>Hello jQuery!</div>
    <div>Hello Prototype!</div>
    <div>Hello MooTools!</div>
  </div>
</div>

</body>
</html>

lampsunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery选项卡

jquery选项卡body { background-color: #FFF; font: 12px/21px Arial; margin: 3em;}h3 { font-size: 16px; margin-bottom: 1em;}h3 span { color: #666; font-size: 14px; marg
复制链接

扫一扫