Question

之前我问了一个类似的问题，但未能得到答案。现在已经验证了html在jsfiddle中的工作原理。但是，当我运行.html文件时，它不起作用。我很困惑，我以前从未遇到过这个问题。如果有人看到任何东西，请告诉我。感谢

<!DOCTYPE html>
    <html>
        <head>
            <title></title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <style type="text/css">
        #container{width:978px;}
        .content {
            display: none;
            padding-left: 5px;
            left: 0px;
            width: 100%;
            top: 30px;
            background: yellow;
        }
        ul{width: 100%;}
        li{
            float: left;
            padding: 5px;
            background: #e5e5e5;}

        #div{
            background: #9e9e9e;
            height: 20px;
            width: 978px;
        }
        br{
            clear: left;
        }
        </style>

        <script type="text/javascript">
            $(function() {
            $('.action').click(function() {          
                var name = $(this).attr("name");
                var content = $('.content[name=' + name + ']');
                $('.content').not(content).hide('fast');
                content.slideToggle('fast');
            });
        });

        </script>
         </head>
        <body>

        <div id="container"><ul>
            <li>
                <a href="#" class="action" name="summer">summer</a>
            </li>
            <li>
                <a href="#" class="action" name="winter">winter</a>
            </li>
            <li>
                <a href="#" class="action" name="weather">weather</a>
            </li>
            </ul></div><br>
            <div class="content" name="summer">
                <a href="link">june</a>
                <a href="link">july</a>
            </div>
            <div class="content" name="winter">
                    <a href="link">november</a>
                    <a href="link">december</a>
                </div>
            <div class="content" name="weather">
                    <a href="link">rain</a>
                    <a href="link">sun</a>
            </div>

            <div id="div"></div>


        </body>
        </html>

Answer 1

</script>之前有一个看不见的无效字符。删除它，没关系。

Answer 2

jsfiddle添加 normalize.css 。删除隐形字符后，我在头部添加了以下行。

<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">

我已经测试了你的代码。使用以下行，它可以工作。

=== UPDATE ===

这里测试的代码：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/normalize.css">
<!-- link rel="stylesheet" type="text/css" href="http://fiddle.jshell.net/css/result-light.css" -->

    <style type="text/css">
    #container{width:978px;}
    .content {
        display: none;
        padding-left: 5px;
        left: 0px;
        width: 100%;
        top: 30px;
        background: yellow;
    }
    ul{width: 100%;}
    li{
        float: left;
        padding: 5px;
        background: #e5e5e5;}

    #div{
        background: #9e9e9e;
        height: 20px;
        width: 978px;
    }
    br{
        clear: left;
    }
    </style>

    <script type="text/javascript">
        $(function() {
        $('.action').click(function() {          
            var name = $(this).attr("name");
            var content = $('.content[name=' + name + ']');
                            $('.content').not(content).hide('fast');
            content.slideToggle('fast');
        });
    });

    </script>
     </head>
    <body>

    <div id="container"><ul>
        <li>
            <a href="#" class="action" name="summer">summer</a>
        </li>
        <li>
            <a href="#" class="action" name="winter">winter</a>
        </li>
        <li>
            <a href="#" class="action" name="weather">weather</a>
        </li>
        </ul></div><br>
        <div class="content" name="summer">
            <a href="link">june</a>
            <a href="link">july</a>
        </div>
        <div class="content" name="winter">
                <a href="link">november</a>
                <a href="link">december</a>
            </div>
        <div class="content" name="weather">
                <a href="link">rain</a>
                <a href="link">sun</a>
        </div>

        <div id="div"></div>


    </body>
    </html>

适用于firefox和IE8。

Answer 3

页面中的JS代码需要

$(document).ready(function() {
    $('.action').click(function() {          
        var name = $(this).attr("name");
        var content = $('.content[name=' + name + ']');
        $('.content').not(content).hide('fast');
        content.slideToggle('fast');
    });
});

并将http:添加到jQuery网址：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

我的标记在jsfiddle中工作，但不在任何浏览器中

3 个答案: