jquery 滑动门切换效果

最新推荐文章于 2024-08-29 08:08:48 发布

网络剑客

最新推荐文章于 2024-08-29 08:08:48 发布

阅读量887

点赞数

分类专栏： jQuery技术

本文链接：https://blog.csdn.net/dongsg11200/article/details/8663228

版权

jQuery技术专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {//文档就绪时运行
            $(".neir").eq(0).show()//初始化内容  显示第一个标签的内容
            $(".nav_list li").eq(0).addClass("jinn")//初始化内容  第一个标签显示为选中
            $(".nav_list li").click(function () {//如果是鼠标经过效果把click改成mouseenter
                $(".nav_list li").removeClass("jinn")//移除所有的选中效果									 
                $(this).addClass("jinn")//当前选中标签获得选中效果								 
                var x = $(this).index()//获得当前点击元素在同级的序号
                $(".neir").hide()//影藏所有的内容
                $(".neir").eq(x).show()//显示当前选中的内容
            })
        })
    </script>
    <style type="text/css">
        .neir
        {
            display: none;
            clear: both;
        }
        .nav_list li
        {
            display: block;
            width: 20px;
            height: 20px;
            float: left;
            background: #fff;
        }
        .jinn
        {
            background: #F00 !important;
        }
        /*!important指的是重定义  覆盖前面同级效果*/
    </style>
</head>
<body>
    <!--注意标签和标签应该为同级   内容和内容也是同级-->
    <ul class="nav_list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="neir">
        1</div>
    <!--随便什么标签  class是neir就可以   但是每个标签必须是同级关系-->
    <div class="neir">
        2</div>
    <div class="neir">
        3</div>
</body>
</html>