使用JavaScript切换div
[英]Toggle div using javascript
问题描述
我正在尝试使用此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网站上可以正常工作，但不能在本地计算机上工作。
5 个解决方案
解决方案1
1 2015-07-18 14:05:13
在遇到HTML元素之前，将加载并执行脚本。 您可以将脚本移到BODY标记下方，并且可以脱机工作。
祝好运！
解决方案2
0 已采纳 2015-07-18 14:03:47
只需将脚本添加到的末尾，即可正常运行。
解决方案3
0 2015-07-18 14:05:50
script标签内的内容需要放置在某种函数中，并且在主体加载时需要调用该函数，否则它们将无法正常运行。 将您所有的Javascript代码放在如下的load函数中：
<script>
function load() {
// rest of the code..
}
</script>
然后设置要在文档加载时调用的函数：
<body onload="load()"> ...
然后一切都应该正常工作。
解决方案4
0 2015-07-18 14:09:20
问题不在于您的Java脚本，而是在于您在html之前编写Java脚本。 这没有给JS足够的时间来加载html
一个简单的解决方法是将JS移至底部或使用诸如document.ready()东西
解决方案5
-2 2015-07-18 14:06:34
我用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>
使用div id进行Javascript切换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.