Question

观

我想制作带导航的网站，我希望它当时只有一个部分可见。

单击导航栏中的certian按钮时，将显示可见部分。

问题

我试过这样做

$(document).ready(function show(){
  document.getElementById(#showElement).style.display= "block";
})

我遇到此代码的问题是我无法检查单击了哪个按钮并确定哪些部分应该display:none;

我甚至不确定这是否可以做到，我无法想象我会怎么做。

我是JavaScript新手，我需要帮助，谢谢先进的

Answer 1

example of bootstrap

你听说过bootstrap吗？

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

＆＃13;

https://v4-alpha.getbootstrap.com/components/navs/ 它可以照顾你想要的很多东西。我想你想要下拉列表

Answer 2

以下是如何在按钮点击时显示和隐藏元素的示例。在我的例子中，我在隐藏和显示2个元素之间切换：

document.getElementById('toggleBtn').addEventListener('click', toggleDivs);

function toggleDivs() {
  var div1 = document.getElementById('div1');
  var div2 = document.getElementById('div2');

  if (div1.style.display != 'none') {
    div1.style.display = 'none';
    div2.style.display = 'inline';
  } else {
    div1.style.display = 'inline';
    div2.style.display = 'none';
  }
}

<div id="div1">
  <p>Here is some content in div 1</p>
</div>
<div id="div2">
  <p>Here is some content in div 2</p>
</div>
<input id="toggleBtn" type="button" value="Toggle Divs" />

Answer 3

是的，您可以通过隐藏所有部分并仅显示与导航链接匹配的部分来实现此目的。查看此示例。

＆＃13;

let links = document.querySelectorAll("nav a");

for (let link of links) {
    link.addEventListener('click', function(e) {
        let sections = document.getElementsByTagName("section");
        for (let section of sections) {
            if ("#" + section.id === link.getAttribute("href")) {
                section.style.display = "block";
            } else {
                section.style.display = "none";
            }
        }
    });
}

＆＃13;

body {margin: 0}
section {
    height: 500px;
    width: 100%;
}
nav {
    position: fixed;
    top:10px;
    left: 20px
}

＆＃13;

<nav>
  <a href="#one">one</a> |
  <a href="#two">two</a> |
  <a href="#three">three</a> |
  <a href="#four">four</a>
</nav>
<section id="one" style="background-color: coral"></section>
<section id="two" style="background-color: cyan; display: none"></section>
<section id="three" style="background-color: mediumspringgreen; display: none"></section>
<section id="four" style="background-color: moccasin; display: none"></section>

＆＃13;

你能用javascript点击一个元素并点击其他元素吗？

3 个答案: