Fatal编程技术网
  • javascript/
  • JavaScript在单击时显示和隐藏元素

JavaScript在单击时显示和隐藏元素

javascript

JavaScript在单击时显示和隐藏元素,javascript,Javascript,请原谅我的无知，我不知道我在做什么，但我正在努力 我试图通过搜索找到答案，但在jQuery中只得到了一个函数结果。由于这是一个很小的部分，我认为最好只使用普通的JavaScript，而不是加载整个jQuery库 有人知道我如何/是否可以实现下面相同的功能，但只使用普通JavaScript？基本上，我想做的是当点击butt1时，无序列表链接将被隐藏，div box1将显示： <html> <head> <title>qwerty</title&g

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

我试图通过搜索找到答案，但在jQuery中只得到了一个函数结果。由于这是一个很小的部分，我认为最好只使用普通的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>
这里有一个链接，上面是一个工作示例：-这是我想要复制的功能

我要向所有花点时间的人表示感谢-

您可以使用getElementById选择使用等效于$something的id的元素，使用GetElementsByCassName根据等效于$something的类名选择元素，并且可以使用style属性将显示样式设置为等效于jQuery.css方法：

但是请注意，旧版本的IE不支持GetElementsByCassName，这就是为什么jQuery对小事情也有用的原因——它缩短了代码并消除了所有恼人的浏览器差异

此外，上面的代码和jQuery之间的一个主要区别是使用了.live jQuery方法，该方法监视DOM并将事件附加到与选择器匹配的任何元素，无论它是在DOM中还是将来添加的。对于上面的代码，如果在代码运行时DOM中还没有id为butt1的元素，您将得到一个TypeError，因为getElementById将返回null

可能成为：

document.getElementById('links').style.display = 'none';
实际上，加载jQuery很有意义，因为您是从GoogleCDN进行加载的。很多网站都使用它，所以很有可能在某个时候至少你的一些用户已经下载了它。另外，jquerycompressed是一个非常小的下载。如此之多以至于jQuery风格代码的可读性是值得的。

jQuery的生产压缩版本只有31KB。把它装进去。如果不需要UI，则不必加载它。在Jquery中，执行您想要的操作所需的代码量并不值得这么简单。另外，正如JamWaffles所说，如果还有其他地方您将使用Jquery，那么只需加载并使用它。

这意味着您只有一个框

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

 links.onclick = function() {
  links.style.display = "none";
  box1.style.display = "inline";
 };
};
好的，虽然最简单的方法是用jQuery风格实现，但您仍然可以在Javascript中复制该功能

这里的关键是getElementById函数，该函数用于获取要操作的特定元素，然后您只需根据上下文将element.style.display属性设置为“none”，将其隐藏时设置为“block”或“inline”

这是我的破绽

<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>
如果您已经或将要对站点的其他部分使用jQuery，那么您也可以使用它。 
window.onload = function() {
 var links = document.getElementById("links"),
     box1  = document.getElementsByClassName("box1")[0];

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

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