• 奇怪的bug:javascript不执行


    背景:有人想要个简单的js效果,点击某个菜单,其他菜单收起。

    说了下思路,结果~~

    只好直接写了一个,代码如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"/>
    <script type="text/javascript">
        $(function () {
            alert("sdfsfd");
            $(".content").hide();
        });
        $(".menu").click(function () {
            $(".content").hide();
            $(this).siblings().show();
        });
    
    </script>
        
    </head>
    <body>
    
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    
    </body>
    </html>

    但是,jQuery代码一行都没执行!!!

    略过期间吐血的反复试alert(),直接说结论吧:

    导入script的标签,不能自闭合!!!

    就是不能写成这样:<script src="..."/>

    而需要写成这样:<script src="..."></script>

    否则后面的第一个<script>标签整体不会执行!!!

    但是不会影响第二个及以后的<script>标签。。。

    如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script> <!--不能合并-->
        <script type="text/javascript">
            $(function () {
                $(".content").hide();
            });
            $(".menu").click(function () {
                $(".content").hide();
                $(this).siblings().show();
            });
        </script>
        
    </head>
    <body>
    
    
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    <div>
        <div class="menu">标题</div>
        <div class="content">AAAAAAAAAAAAAAAA<br/>BBBBBBBBBBBBBBBB<br/>CCCCCCCCCCCCCCCC<br/>DDDDDDDDDDDDDDDD<br/>EEEEEEEEEEEEEEEE<br/>
        </div>
    </div>
    
    </body>
    </html>
  • 相关阅读:
    Nero8刻录引导系统光盘镜像图文教程
    C#多线程与并行编程方面的电子书,中英文版本
    [转]C#通过委托更新UI(异步加载)
    [PHP] 6种负载均衡算法
    [GIt] 团队工作效率分析工具gitstats
    [Git] git代码统计
    [Git] 写文章 史上最全文献检索、阅读及管理攻略
    [Git] 谷歌的代码管理
    [JQuery] jQuery选择器ID、CLASS、标签获取对象值、属性、设置css样式
    [Mongo] 解决mongoose不支持条件操作符 $gt$gte:$lte$ne $in $all $not
  • 原文地址:https://www.cnblogs.com/larryzeal/p/5528001.html
Copyright © 2020-2023  润新知