本人刚学JQUERY,在看《锋利的JQUERY》的时候遇到一个问题,照着书中代码写了一段<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <script src="lib/jquery/jquery-1.3.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(".has_children").click(function(){
                $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
            });
        </script>
        <style type="text/css">
            #menu{width:300px;}
            .has_children{background:#555;color:#fff;cursor:pointer;}
            .highlight{color:#fff;background:green;}
            div{padding:0;margin:10px 0;}
            div a {background:#888;display:none;float:left;width:300px;}
        </style>
    </head>
    <body>
        <div id="menu">
            <div class="has_children">
                <span>第一章 认识JQUERY</span>
                <a>1.1 jquery</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>第二章 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>第三章 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>没有出来书中的效果(单击不同的的章节名称链接,显示相应的内容,同时高亮显示当前选择的章节),救解!

解决方案 »

  1.   

                $(function(){
                    $(".has_children").click(function(){ 
                        $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide(); 
                    }); 
                });
                //or
                $(document).ready(function(){//wait for the dom load
                    //put your code here
                });
      

  2.   

    对了N遍了已经

    <script type="text/javascript">
                $(".has_children").click(function(){
                    $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
                });
            </script> 
    换成
    <script type="text/javascript">
    $(document).ready(function(){
    alert("aa");
    });
            </script> 没有问题
      

  3.   

                
                $(document).ready(function(){
                     $(function(){
                    $(".has_children").click(function(){ 
                        $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide(); 
                    }); 
                });
                });