简体   繁体   English

我的标记可在jsfiddle中使用,但不能在任何浏览器中使用

[英]My markup works in jsfiddle but not in any browser

I asked a similar question before but wasn't able to get an answer. 我之前问过类似的问题,但无法得到答案。 Now its been verified that the the html works in jsfiddle. 现在已经验证了html可在jsfiddle中使用。 But when I run the .html file it doesn't work. 但是,当我运行.html文件时,它不起作用。 I am very confused, I have never faced this problem before. 我很困惑,我以前从未遇到过这个问题。 If anyone sees anything please let me know. 如果有人看到任何东西,请告诉我。 Thanks 谢谢

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

You have an invisible invalid character just before the </script> . 您在</script>之前有一个看不见的无效字符。 Remove it and it's OK. 删除它就可以了。

jsfiddle adds the normalize.css . jsfiddle添加了normalize.css After removing the invisible chars , I've added following line into the head. 除去不可见的字符后,我将以下行添加到头部。

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

I've tested your code. 我已经测试了您的代码。 With following line it works. 随着下面的行,它的工作原理。

=== UPDATE === ===更新===

Here the tested code: 这里是经过测试的代码:

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

Works with firefox and IE8. 适用于Firefox和IE8。

Your JS code in the page needs to be 页面中的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');
    });
});

And add http: to the jQuery url: 并将http:添加到jQuery URL:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM