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

我需要得到的内容是可见的时候，在侧栏上的链接被点击，因为它太长。我有以下链接，并且有用div标记分隔的部分。还有一个JavaScript函数，我从锚标记调用它，但它不起作用，它不会改变内容。你能告诉我怎么做吗。非常感谢

锚定标签 节标记 JavaScript

---

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

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

下面有aa代码的地方会帮助你更好地理解，这只是一种识别你点击的方式，当然还有其他方式

看看我在哪里传递这个函数

函数myFunctionx{ 如果x.getAttribute'value'==about{ getAttribute'value'； } 如果x.getAttribute'value'==任务{ getAttribute'value'； } 如果x.getAttribute'value'==控制器{ getAttribute'value'； } } 这是一个工作模式和下面的代码

HTML 编辑：

这是两个JSFIDDLE

---

JSFiddle行为会使它们的行为有点奇怪，JSFiddle会在iframe中打开链接。由于JSFiddle阻止您获取JSFiddle URL，因此JSFiddle中的代码都是模拟的。在普通站点上，您可以取消对代码的注释并删除其他伪代码。

元素不能共享相同的id。Echoing@Marty，特别是“id=mySelect x3”…如果我从锚定标记中删除mySelect id，您认为它会起作用吗？不，我认为您还需要从单击的锚定中正确获取值。不，目前有各种各样的问题。接下来要看的是，您试图将从getElementById返回的元素与字符串进行比较？在我的代码中，我识别点击，现在你需要在每次点击时采取正确的操作，你明白了吗？嘿，是的，我明白了。。。但它没有改变。。。。。然后我使用了另一个代码。。。。但是我调试这个太晚了。。当href属性存在时，它不会打开…嘿，非常感谢。。。。它可以工作，但该部分在几秒钟内返回默认内容。知道为什么会发生这种情况吗？现在试试，我无意中没有做最新版本。重新运行链接。他们需要其他帮助。。你知道我如何从另一个页面调用这个函数吗。。。例如，如果我使用与子菜单相同的部分来指向此页面，并使该特定部分可见。

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

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

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

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";
  }
}