JQuery实战小练——标签页效果

最新推荐文章于 2022-11-11 19:58:14 发布

枫轻·

最新推荐文章于 2022-11-11 19:58:14 发布

阅读量207

点赞数

分类专栏：电脑学习文章标签： Jquery 标签页

本文链接：https://blog.csdn.net/lifuchao784533/article/details/90141394

版权

电脑学习专栏收录该内容

61 篇文章 2 订阅

订阅专栏

本文通过实例展示了如何使用JQuery创建动态标签页效果，包括切换、添加和删除等功能，帮助读者掌握JQuery在前端交互中的应用。

摘要由CSDN通过智能技术生成

标签页效果如下：(ps:介绍词，来自邢美玲)
在这里插入图片描述

<head>
    <meta charset="utf-8" />
    <title>标签页</title>
    <style type="text/css">
        /*第一个标签页样式*/
        ul, li {
            margin:0;
            padding:0;
            list-style:none;
        }
        #tabfist li {
            float: left;
            background-color: #000000;
            color: #ffffff;
            margin-left: 10px;
            padding: 10px;
            border: 3px solid #ffffff;
        }
        div {
            clear:left;
            padding:10px;
            margin-left:10px;
            background:#808080;
            color:#ffffff;
            width:300px;
            height:50px;
            display:none;
        }
        #tabfist li.name {
            background-color: #808080;
            border: 3px solid #808080;
        }
        div.contentin {
            display: block;
        }           
    </style>
    <script src="jquery.js"></script>
    <script type="text/javascript">
            
        var timeoutid;
        //加载出dom
        $(document).ready(function () {

            /*第一个标签页JavaScript*/
            $("#tabfist li").each(function (index) {
                //鼠标移动上之后
                $(this).mouseover(function () {
                    //需要加载一个演示操作，避免鼠标滑动过去就加载
                    var liNode = $(this);
                    timeoutid = setTimeout(function () {
                        //div.contentin1标签下的内容隐藏，移除contentin1
                        $("div.contentin").removeClass("contentin");
                        //对标签进行移除
                        $("li.name").removeClass("name");
                        //当前对应的内容区显示出来
                        $("div").eq(index).addClass("contentin");
                        //dui name1标签进行添加
                        liNode.addClass("name");
                    }, 300);
                }).mouseout(function () {
                    clearTimeout(timeoutid);//清除去上次加载的timeoutid
                });
            });
        });     
    </script>
</head>
<body>
    <ul id="tabfist">
        <li class="name">刘檬</li>
        <li >张新玲</li>
        <li >邢美玲</li>
    </ul>
    <br/>
    <div class="contentin">刘檬，又名刘一刀,外表美艳动人，内心热情似火</div>
    <div >张新玲，心灵手巧--最爱兵兵（二声）</div>
    <div >邢美玲，小可爱一枚</div>    
</body>

枫轻·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
6
评论
JQuery实战小练——标签页效果

标签页效果如下：(ps:介绍词，来自邢美玲)<head> <meta charset="utf-8" /> <title>标签页</title> <style type="text/css"> /*第一个标签页样式*/ ul, li { margin:0;...
复制链接

扫一扫

专栏目录