Question

我是JavaScript的新手，我确信这是一个非常简单的修复。我根据点击的按钮动态更改div内容。这个例子适用于JSFiddle，但是当我把它放在我的PC上时，即使我用$(window).load(function(){ ... })

包裹JS，它也只是加载整个网页

我的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>

我的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');
});

Answer 1

$(window).load(function(){ ... })

替换为：

$(document).ready(function(){ ... })

Answer 2

将您的(window).load替换为(document).ready

所有资产加载完成后都会调用

load，包括图像。当DOM准备好进行交互时会触发ready。

<强>负载（）

加载事件在结束时触发文件加载过程。在这点，所有的对象文档在DOM中，而且全部都在图像和子帧已经完成负荷。

ready（）

虽然JavaScript提供了负载用于在页面执行代码的事件渲染，此事件没有得到触发，直到所有资产如图像已被完全接收。在大多数情况下，可以运行脚本一旦DOM层次结构出现了完全构造。处理程序通过到.ready（）保证是在DOM准备好之后执行，所以这通常是最好的地方附加所有其他事件处理程序和运行其他jQuery代码。使用时依赖于CSS值的脚本风格属性，这很重要引用外部样式表或之前嵌入样式元素引用脚本。

Answer 3

试试这个

$(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');
});

Answer 4

您可以尝试以下解决方案：

function showContent(type) {
    $($content).hide();
    $('#'+type).show();
  }

当我在PC上运行你的代码片段时，我发现Jquery无法根据你在加载时指定的选择器找到div。

JavaScript - 加载整个网页而不是特定的div

4 个答案: