jquery 滑动门切换效果 

<!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>

posted @ 2013-03-12 13:20  网络剑客  阅读(155)  评论(0)    收藏  举报