Question

请原谅我的无知，我不知道我在做什么，但我正在努力。

我试图通过搜索找出它，但它只在jQuery中产生了一个功能结果。由于这是一个很小的部分，我认为最好只使用普通的vanilla JavaScript而不是加载整个jQuery库。

有谁知道如何/如果我可以完成下面的相同功能，但只有正常的 JavaScript ？基本上我要做的是当点击“butt1”时，无序列表“链接”将被隐藏，并显示div“box1”：

<html> 
<head> 
   <title>qwerty</title> 
   <style type="text/css"> 
      .box1 {background: red;}
   </style> 
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
   <script type="text/javascript"> 
      $("#butt1").live("click", show_box1);
      function show_box1(event) {
          $("#links").css("display", "none");
          $(".box1").css("display", "inline");            
      }
  </script> 
</head> 
<body> 
   <ul id="links"> 
      <li id="butt1"><a href="#">blah</a></li> 
      <li id="butt2"><a href="#">blah</a></li> 
      <li id="butt3"><a href="#">blah</a></li> 
   </ul> 
   <div class="box1" style="display: none;">You clicked butt1!</div> 
</body> 
</html>

以上是上面作为工作示例的链接：http://jsbin.com/umitef/4/ - 这是我要复制的功能。

我非常感谢任何需要片刻的人......： - ）

Answer 1

您可以使用getElementById使用id（相当于$("#something")）和getElementsByClassName来选择元素，以根据类名选择元素（相当于{{ 1}}），您可以使用$(".something")属性设置style样式（相当于jQuery display方法）：

.css

但请注意，早期版本的IE不支持var boxes = document.getElementsByClassName("box1"); document.getElementById("butt1").onclick = function() { document.getElementById("links").style.display = "none"; for(var i = 0; i < boxes.length; i++) { boxes[i].style.display = "inline"; } }，这就是为什么jQuery即使对于小东西也很有用 - 它会缩短代码并消除所有烦人的浏览器差异。

此外，上述代码与jQuery之间的一个主要区别是使用getElementsByClassName jQuery方法，该方法监视DOM并将事件附加到与选择器匹配的任何元素，无论它是否已在DOM中或者它将来会被添加。使用上面的代码，如果在代码运行时DOM中没有.live“butt1”的元素，您将得到一个TypeError，因为id将返回getElementById。< / p>

Answer 2

$("#links").css("display", "none");

可能成为：

document.getElementById('links').style.display = 'none';

实际上，加载jQuery很有意义，因为你是从谷歌CDN做的。许多网站都使用它，因此很有可能在某些时候至少有一些用户已经下载了它。另外，jQuery压缩是一个非常小的下载。以至于jQuery样式代码的可读性是值得的。

Answer 3

好的，虽然最简单的方法是使用jQuery样式，但您仍然可以在Javascript中复制该功能。

这里的关键是 getElementById 函数来获取您想要操作的特定元素，然后只需将 element.style.display 属性设置为'当你想隐藏它时，没有'，当你想要显示它时，'阻止'或'内联'

这是我对它的抨击......

<head>
<title>qwerty</title> 
<style type="text/css"> 
    #box1 {background: red;}
    #box2 {background: blue;}
    #box3 {background: yellow;}
</style>

<script type="text/javascript">
function toggle_visibility(id) {
    var ul = document.getElementById('links');
    var box = document.getElementById(id);
    if(ul.style.display == 'none')
    {
        ul.style.display = 'block';
        box.style.display = 'block';
    }
    else
    {
        ul.style.display = 'none';
        box.style.display = 'block';
    }
}
</script>
</head>
<body>

<ul id="links"> 
    <li id="butt1"><a href="#" onclick="toggle_visibility('box1');">blah</a></li> 
    <li id="butt2"><a href="#" onclick="toggle_visibility('box2');">blah</a></li> 
    <li id="butt3"><a href="#" onclick="toggle_visibility('box3');">blah</a></li> 
</ul> 
    <div id="box1" style="display: none;">You clicked butt1!</div>
    <div id="box2" style="display: none;">You clicked butt2!</div> 
    <div id="box3" style="display: none;">You clicked butt3!</div> 
</body>

</html>

Answer 4

Jquery的生产压缩版本只有31KB。通过http://code.google.com/apis/libraries/devguide.html#jquery加载它。如果你不需要它，你不必加载UI。在Jquery中，执行所需操作的代码量并不值得。再加上JamWaffles说如果还有其他地方你会使用Jquery然后加载它并使用它。

Answer 5

这假设您只有一个方框

window.onload = function() {
 var links = document.getElementById("links"),
     box1  = document.getElementsByClassName("box1")[0];

 links.onclick = function() {
  links.style.display = "none";
  box1.style.display = "inline";
 };
};

JavaScript会在点击时显示和隐藏元素

5 个答案: