zoukankan      html  css  js  c++  java
  • 点击下拉,其余不动的jquery事件(转)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>1-5-1</title>
    <style type="text/css">
    #menu { 
        width:300px; 
    }
    .has_children{
        background : #555;
        color :#fff;
        cursor:pointer;
    }
    .highlight{
        color : #fff;
        background : green;
    }
    div{
        padding:0;
    }
    div a{
        background : #888;
        display : none;
        float:left;
        width:300px;
    }
    </style>
    <!-- 引入 jQuery -->
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //等待dom元素加载完毕.
    $(document).ready(function(){
        $(".has_children").click(function(){
            $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
        });
    });
    </script>
    </head>
    <body>
    <div id="menu">
        <div class="has_children">
            <span>第1章-认识jQuery</span>
            <a>1.1-JavaScript和JavaScript库</a>
            <a>1.2-加入jQuery</a>
            <a>1.3-编写简单jQuery代码</a>
            <a>1.4-jQuery对象和DOM对象</a>
            <a>1.5-解决jQuery和其它库的冲突</a>
            <a>1.6-jQuery开发工具和插件</a>
            <a>1.7-小结</a>
        </div>
        <div class="has_children">
            <span>第2章-jQuery选择器</span>
            <a>2.1-jQuery选择器是什么</a>
            <a>2.2-jQuery选择器的优势</a>
            <a>2.3-jQuery选择器</a>
            <a>2.4-应用jQuery改写示例</a>
            <a>2.5-选择器中的一些注意事项</a>
            <a>2.6-案例研究——类似淘宝网品牌列表的效果</a>
            <a>2.7-还有其它选择器么?</a>
            <a>2.8-小结</a>
        </div>
        <div class="has_children">
            <span>第3章-jQuery中的DOM操作</span>
            <a>3.1-DOM操作的分类</a>
            <a>3.2-jQuery中的DOM操作</a>
            <a>3.3-案例研究——某网站超链接和图片提示效果</a>
            <a>3.4-小结</a>
        </div>
    </div>
    </body>
    </html>本文转自《LuckySally 》
    文转自《LuckySally 》文转自LuckySally本本文本文转自《
  • 相关阅读:
    洛谷p1017 进制转换(2000noip提高组)
    Personal Training of RDC
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Eurasia
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Peterhof.
    Asia Hong Kong Regional Contest 2019
    XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia
    XVIII Open Cup named after E.V. Pankratiev. Ukrainian Grand Prix.
    XVIII Open Cup named after E.V. Pankratiev. GP of SPb
    卜题仓库
    2014 ACM-ICPC Vietnam National First Round
  • 原文地址:https://www.cnblogs.com/GP1014336455/p/7763398.html
Copyright © 2011-2022 走看看