JavaScript-加载整个网页而不是特定的div
[英]JavaScript - Loading the entire webpage not specific div
问题描述
I'm new to JavaScript and I'm sure that this is a very trivial fix. 
我是JavaScript的新手，我相信这是一个非常简单的修复。 I'm dynamically changing a div content based on which button is clicked. 我正在基于单击哪个按钮来动态更改div内容。 This example works in JSFiddle but however when I put it on my PC it simply loads the entire webpage even when I wrap the JS with $(window).load(function(){ ... }) 此示例在JSFiddle中有效，但是当我将其放在PC上时，即使我用$(window).load(function(){ ... })包装JS，它也可以简单地加载整个网页$(window).load(function(){ ... })
My HTML: 我的HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src= "http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class="menu">
<li><a href="#about" class="menu-btn">About</a></li>
<li><a href="#contact" class="menu-btn">Contact</a></li>
<li><a href="#misc" class="menu-btn">Misc</a></li>
</ul>
<div id="about" class="menu-content">About</div>
<div id="contact" class="menu-content">Contact</div>
<div id="misc" class="menu-content">Misc</div>
</body>
</html>
My JS (script.js): 我的JS（script.js）：
$(window).load(function(){
var $content = $('.menu-content');
function showContent(type) {
$('div', $content).hide();
$('div[data-menu-content='+type+']').show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
showContent('about');
});
4 个解决方案
解决方案1
4
$(window).load(function(){ ... })
替换为：
$(document).ready(function(){ ... })
解决方案2
1 2017-09-20 10:35:16
Replace your (window).load to (document).ready 将(window).load替换为(document).ready
load is called when all assets are done loading, including images. load时，所有资产都加载完成，包括图片被调用。 ready is fired when the DOM is ready for interaction. ready当DOM准备相互作用被触发。
load() 加载（）
The load event fires at the end of the document loading process.
ready() 准备（）
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received.
解决方案3
0 2017-09-20 10:25:46
try this 尝试这个
$(document).ready(function(){
var $content = $('.menu-content');
function showContent(type) {
$('div', $content).hide();
$('div[data-menu-content='+type+']').show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
showContent('about');
});
解决方案4
0 2017-09-20 10:26:41
You can try below solution : 您可以尝试以下解决方案：
function showContent(type) {
$($content).hide();
$('#'+type).show();
}
When i ran your snippet in my PC, I found out that Jquery was not able to find div, based on the selectors you have specified at the time of loading. 当我在PC上运行您的代码段时，我发现Jquery无法根据您在加载时指定的选择器找到div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.