我试图使用这个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网站上正常运行,但没有在本地机器上运行。
答案 0 :(得分:1)
在遇到HTML元素之前加载并执行脚本。您可以将脚本移动到BODY标记下方,它可以脱机工作。
祝你好运!
答案 1 :(得分:0)
只需在您的末尾添加脚本,然后它就可以正常工作。
答案 2 :(得分:0)
script
标签内的内容需要放置在某种功能中,并且需要在主体加载时调用该功能,否则它们将无法正常运行。将所有Javascript代码放在load
函数中,如下所示:
<script>
function load() {
// rest of the code..
}
</script>
然后设置文档加载时要调用的函数:
<body onload="load()"> ...
然后一切都应该正常运作。
答案 3 :(得分:0)
问题不在于您的java脚本,而在于您在html之前编写java脚本。 这不足以让JS有足够的时间来加载你的html
一个简单的解决方法是将JS移到底部或使用document.ready()
答案 4 :(得分:-2)
我已经用jQuery和它的糖改变了你的代码部分。它是更多的跨浏览器解决方案,可以节省您的时间 使用此:
<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;