jQuery Tab栏切换

最新推荐文章于 2021-02-05 23:47:05 发布

爱吃胡萝呗

最新推荐文章于 2021-02-05 23:47:05 发布

阅读量412

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/wfh_fighting/article/details/53035443

jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文展示了一个使用HTML和jQuery实现的简单导航栏交互效果。当鼠标移过导航栏的不同选项时，相应的面板会显示出来，同时更新导航项的状态。通过这个示例，读者可以了解到如何利用基本的HTML结构配合简单的CSS样式以及jQuery来完成网页上的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:440px;
            border:1px solid #000000;
            margin: 100px auto;
            padding: 10px;
        }
        .hd{
            overflow: hidden;
        }
        .hd span{
            float: left;
            margin-right: 10px;
            width: 100px;
            height: 30px;
            background-color: #ccc;
        }
        .hd span.current{
            background-color: deeppink;
        }
        .bd div{
            width: 440px;
            height: 300px;
            background-color: deeppink;
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script>
        $(function () {
            $('.hd span').mouseenter(function () {
                //sibling兄弟，siblings兄弟们
                //被鼠标经过的哪一个属性变为current，其他的class为空
                $(this).attr('class','current').siblings().attr('class','');
                //选择符合元素索引号的那个显示出来，其他兄弟们隐藏
                $('.bd div').eq($(this).index()).show().siblings().hide();
            })
        })
    </script>
</head>
<body>
<div class="box">
    <div class="hd">
        <span class="current">新闻</span>
        <span>体育</span>
        <span>娱乐</span>
        <span>财经</span>
    </div>
    <div class="bd">
        <div style="display: block">新闻</div>
        <div>体育</div>
        <div>娱乐</div>
        <div>财经</div>
    </div>
</div>
</body>
</html>