Question

我试图使用这个jsfiddle，但它不能脱机工作。你能否指出错误：http://jsfiddle.net/2ofkr7ph/

这是我的代码，但它不适用于本地代码。

<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
    display:inline-block;
    font-weight:bold;
    padding:6px 10px;
    cursor:pointer;
    border:2px solid tomato;
    margin:5px;
}
.container {
    border:2px solid black;
    margin:5px;
}
.container > div {
    display:none;
}
.container > div:first-child {
    display:block;
}
</style>
<script>
var menu_elements = document.querySelectorAll('.menu>li'),
    menu_length = menu_elements.length;
for (var i = 0; i < menu_length; i++) {
    menu_elements[i].addEventListener('click', function (e) {
        var target = document.querySelector('.container>.' + e.target.classList[0]); // clicked element
        Array.prototype.filter.call(target.parentNode.children, function (siblings) {
            siblings.style.display = 'none'; // hide sibling elements
        });
        target.style.display = 'block'; // show clicked element
    });
}
</script>
</head>

<body>
<ul class="menu">
    <li class="toggle1">One</li>
    <li class="toggle2">Two</li>
    <li class="toggle3">Three</li>
    <li class="toggle4">Four</li>
    <li class="toggle5">Five</li>
</ul>
<div class="container">
    <div class="toggle1">Here are the contents of 1.</div>
    <div class="toggle2">Here are the contents of 2..</div>
    <div class="toggle3">Here are the contents of 3...</div>
    <div class="toggle4">Here are the contents of 4....</div>
    <div class="toggle5">Here are the contents of 5.....</div>
</div>
</body>
</html>

它在JSFiddle网站上正常运行，但没有在本地机器上运行。

Answer 1

在遇到HTML元素之前加载并执行脚本。您可以将脚本移动到BODY标记下方，它可以脱机工作。

祝你好运！

Answer 2

只需在您的末尾添加脚本，然后它就可以正常工作。

Answer 3

script标签内的内容需要放置在某种功能中，并且需要在主体加载时调用该功能，否则它们将无法正常运行。将所有Javascript代码放在load函数中，如下所示：

<script>
    function load() {
        // rest of the code..
    }
</script>

然后设置文档加载时要调用的函数：

    <body onload="load()"> ...

然后一切都应该正常运作。

Answer 4

问题不在于您的java脚本，而在于您在html之前编写java脚本。这不足以让JS有足够的时间来加载你的html

一个简单的解决方法是将JS移到底部或使用document.ready()

之类的东西

Answer 5

我已经用jQuery和它的糖改变了你的代码部分。它是更多的跨浏览器解决方案，可以节省您的时间使用此：

＆＃13;

<html>
<head>
<title>BUILD</title>
<style>
.menu > li {
    display:inline-block;
    font-weight:bold;
    padding:6px 10px;
    cursor:pointer;
    border:2px solid tomato;
    margin:5px;
}
.container {
    border:2px solid black;
    margin:5px;
}
.container > div {
    display:none;
}
.container > div:first-child {
    display:block;
}
</style>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  
  <script>
    $(function(){
      $('.menu>li.toggle').click(function(){
        $('.togglable').hide();
        $('.togglable[data-id="'+$(this).data('id')+'"]').show();
      });
    });
  </script>
</head>

<body>
<ul class="menu">
    <li class="toggle" data-id="1">One</li>
    <li class="toggle" data-id="2">Two</li>
    <li class="toggle" data-id="3">Three</li>
    <li class="toggle" data-id="4">Four</li>
    <li class="toggle" data-id="5">Five</li>
</ul>
<div class="container">
    <div class="togglable" data-id="1">Here are the contents of 1.</div>
    <div class="togglable" data-id="2">Here are the contents of 2..</div>
    <div class="togglable" data-id="3">Here are the contents of 3...</div>
    <div class="togglable" data-id="4">Here are the contents of 4....</div>
    <div class="togglable" data-id="5">Here are the contents of 5.....</div>
</div>
</body>
</html>

＆＃13;

使用javascript

5 个答案: