• 奇怪的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>
  • 相关阅读:
    杭电2031进制转换
    杭电2033人见人爱A+B
    【转】到底怎么样才叫看书?
    方便单个实体更新的DbContext扩展方法,比如Edit页面
    使用Newtonsoft.Json
    代码配置 vs. 配置文件
    进程到创建
    C#+VBA 操作EXCEL(转)
    基于定位的社交应用Foursquare开源网址(wp7)
    深入理解计算机系统实验
  • 原文地址:https://www.cnblogs.com/larryzeal/p/5528001.html
Copyright © 2020-2023  润新知