Question

我正在尝试为我正在处理的博客制作导航菜单，目前我正在尝试将其设置为“家庭＆＃39;单击选项卡，另外两个淡出。我不知道为什么这段代码不起作用，因为它是一个非常简单的几行代码。我不会添加CSS，因为我不相信它会与此问题有任何关系。谢谢！

<div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>

var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').fadeOut();
  });
}

document.ready(main);

Answer 1

你根本没有实际调用主函数。

document.ready(main)

应该是JQuery格式：

$(document).ready(main);

Answer 2

您忘记将document包装在JQuery对象中：

$(document).ready(main);

Answer 3

像这样改变：

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

最终代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
   <div id='bckDrp'>
  <div id='nav'>
    <ul id='navLst'>
      <li class='navOp' id='hme'>Home</li>
      <li class='navOp' id='abt'>About</li>
      <li class='navOp' id='prt'>Portfolio</li>
    </ul>
  </div>
</div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
var main = function(){
  $('#hme').click(function(){
    $('#abt, #prt').fadeOut();
  });
}
$(document).ready(function(){
    main();
})
    </script>
</body>
</html>

Answer 4

更改document.ready功能。试试这个：

$(document).ready(function(){
$('#hme').click(function(){
$('#abt, #prt').fadeOut();
});
});

.fadeOut不能使用非常简单的代码

4 个答案: