需要关于如何让它工作的建议

Question

我需要让内容在点击边栏上的 link 时可见，因为它太长了。我有以下 links 并且有用 div 标签分隔的部分。和我从锚标记调用的 JavaScript 函数，但它不起作用，它不会更改内容。你能告诉我怎么做吗？非常感谢

锚标签

<a href="" id="mySelect" onclick="return myFunction();" value="about">
   <h4>Who we Are</h4>
</a>    
<a href="" id="mySelect" onclick="return myFunction();" value="mission">
   <h4>Our Mission & Vission</h4>
</a>    
<a href="" id="mySelect" onclick="return myFunction();" value="director">
   <h4>Director & Advisory Board</h4>
</a>

版块标签

<div id="about" style="display: block;">default content</div>
<div id="mission" style="display: none;">content</div>
<div id="director" style="display: none;">content</div>

JavaScript

<script>
    function myFunction() {
        var x = document.getElementById("mySelect");
        if (x=="") {
          document.getElementById("about").style.display="block";
          document.getElementById("mission").style.display="none";
          document.getElementById("director").style.display="none";
        } 
        if (x=="about") {
          document.getElementById("about").style.display="block";
          document.getElementById("mission").style.display="none";
          document.getElementById("director").style.display="none";
        } 
        if (x=="mission") {
          document.getElementById("about").style.display="none";
          document.getElementById("mission").style.display="block";
          document.getElementById("director").style.display="none";
        }
        if (x=="director") {
          document.getElementById("about").style.display="none";
          document.getElementById("mission").style.display="none";
          document.getElementById("director").style.display="block";
        }
    }
    </script>

Answer 1

你绝对不应该有重复的 ID，这在语义上是不正确的，你不应该这样做。

您应该重构您的代码，最好的方法是使用类。

下面有一个代码可以帮助您更好地理解，这只是识别您的点击的一种方法，当然还有其他方法。

看看我将 this 传递给函数

  <!DOCTYPE html>
  <html>
   <body>
    <a href="" class="mySelect" onclick="myFunction(this)" value="about">
       <h4>Who we Are</h4>
    </a>
    <a href="" class="mySelect" onclick="myFunction(this)" value="mission">
       <h4>Our Mission & Vission</h4>
    </a>
    <a href="" class="mySelect" onclick="myFunction(this)" value="director">
       <h4>Director & Advisory Board</h4>
    </a>
   </body>
   <script >
       function myFunction(x) {
           if (x.getAttribute('value')=="about") {
            alert(x.getAttribute('value'));
           }
           if (x.getAttribute('value')=="mission") {
            alert(x.getAttribute('value'));
           }
           if (x.getAttribute('value')=="director") {
            alert(x.getAttribute('value'));
           }
       }
    </script>
  </html>

Answer 2

这是一个有效的 JSFiddle 和下面的代码。

HTML

<div id="about" style="display: block;">default content</div>
<div id="mission" style="display: none;">content</div>
<div id="director" style="display: none;">content</div>
<a class="mySelect" onclick="myFunction(this)" id="about">
  <h4>Who we Are</h4>
</a>
<a class="mySelect" onclick="myFunction(this)" id="mission">
  <h4>Our Mission & Vission</h4>
</a>
<a class="mySelect" onclick="myFunction(this)" id="director">
  <h4>Director & Advisory Board</h4>
</a>

JS

function myFunction(vm) {
  var x = document.getElementsByClassName("mySelect");
  var id = vm.id;
  if (id == "") {
    document.getElementById("about").style.display = "block";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "none";
  }
  if (id == "about") {
    document.getElementById("about").style.display = "block";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "none";
  }
  if (id == "mission") {
    document.getElementById("about").style.display = "none";
    document.getElementById("mission").style.display = "block";
    document.getElementById("director").style.display = "none";
  }
  if (id == "director") {
    document.getElementById("about").style.display = "none";
    document.getElementById("mission").style.display = "none";
    document.getElementById("director").style.display = "block";
  }
}

编辑：

这是两个 JSFiddle

SubMenu

Directed to Page

JSFiddle 的行为会让他们表现得有点奇怪，JSFiddle 会在 iframe 中打开 link。由于 JSFiddle 阻止您获取 JSFiddle URL，因此 JSFiddle 中的代码都是模拟的。在普通网站上，您可以取消注释代码并删除其他假代码。

需要关于如何让它工作的建议

need advice on how to get this to work

javascript

show-hide

锚标签

版块标签

JavaScript

HTML

JS