0

我之前问过类似的问题，但无法得到答案。现在已验证 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>
4

3 回答 3

6

您在 . 之前有一个不可见的无效字符</script>。删除它就可以了。

于 2012-07-03T16:42:32.137 回答
2

jsfiddle 添加了normalize.css。删除 invisible chars 后，我在头部添加了以下行。

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

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

=== 更新 ===

这里测试的代码：

<!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。

于 2012-07-03T16:58:09.097 回答
0

您在页面中的 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>
于 2012-07-03T16:44:51.610 回答