jQuery-Tab切换

切换布局：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>切换练习</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/demo.js"></script>
</head>

<body>
    <ul id="tab">
        <li class="tabon">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
    </ul>
    <div class="content current-tab">
        标签1内容
    </div>
    <div class="content">
        标签2内容
    </div>
    <div class="content">
        标签3内容
    </div>
</body>

</html>

body{font-size: 14px;}
ul,li{padding:0;margin: 0;list-style: none;}
ul{overflow: hidden;}
li{float: left;background: #ccc;margin-right: 10px;padding:5px;cursor: pointer;}
.tabon{background:#666;color:#fff;}
.content{background: #666;width: 300px;height: 100px;padding: 5px;display:none;}
.current-tab{display: block;}

切换的实现：

var timeoutid;
$(document).ready(function() {
    $("#tab li").each(function(index) {
        var liNode = $(this);
        $(this).mouseover(function() {
            timeoutid = setTimeout(function() {
                $("div.current-tab").removeClass("current-tab");
                $(".content").eq(index).addClass("current-tab");
                $("#tab li.tabon").removeClass("tabon");
                liNode.addClass("tabon");                
            }, 300);
        }).mouseout(function() {
            clearTimeout(timeoutid);
        })
    })
});

posted @ 2015-10-12 17:08 tinyphp Views(277) Comments(0) Edit 收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 对象命名为何需要避免'-er'和'-or'后缀
· JDK 24 发布，新特性解读！
· C# 中比较实用的关键字，基础高频面试题！
· .NET 10 Preview 2 增强了 Blazor 和.NET MAUI
· SQL Server如何跟踪自动统计信息更新?

历史上的今天：
2012-10-12 利用PHP输出某一目录所有文件

tinyphp

发表是吸收的利器！胡适先生说的

jQuery-Tab切换

公告

Search

PostCategories (623)

喜欢请打赏