当前位置：首页 → 问答吧 → 《锋利的JQUERY》书中的问题

《锋利的JQUERY》书中的问题

时间：2010-01-28

来源：互联网

本人刚学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>

没有出来书中的效果（单击不同的的章节名称链接，显示相应的内容，同时高亮显示当前选择的章节），救解！

作者: aries19 发布时间: 2010-01-28

支持啊

作者: swlyb 发布时间: 2010-01-30

$(document).ready(function (){

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


                                    });

作者: xrbx 发布时间: 2010-02-03

费解中。。。

作者: qqfreshman 发布时间: 2010-02-03

你写的代码执行的时候文档还没有加载好呢，参看2楼的代码

作者: ywqbestever 发布时间: 2010-02-03

这本书虽写得不错，但也有不少错误。
我的代码也按楼上的改过，但还是无法显示。

作者: hnboy 发布时间: 2010-02-22

jQuery还没被加载~。
$(function(){
    $(".has_children").click(function(){
        $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();
    });
});

作者: peckzeg 发布时间: 2010-02-22

加上$(function(){
.........
});
后，建议把
<script src="lib/jquery/jquery-1.3.1.js" type="text/javascript"></script>
的src路径简化一下，是不是jQuery框架没引对。

作者: hnboy 发布时间: 2010-02-22