【问题标题】：need advice on how to get this to work需要有关如何使其发挥作用的建议
【发布时间】：2016-05-16 23:47:05
【问题描述】：

当点击侧栏上的链接太长时，我需要让内容可见。我有以下链接，并有部分用 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>

【问题讨论】：

元素不能共享同一个 id。
呼应@Marty，特别是'id="mySelect" x3'...
如果我从锚标签中删除 myselect id，你认为它会起作用吗？
不，我认为您还需要从单击的锚点中正确获取值。
不，目前有各种各样的问题。接下来要看的是您尝试将 getElementById 返回的元素与字符串进行比较。

标签： javascript show-hide

【解决方案1】：

这是一个有效的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";
  }
}

编辑：

这是两个 JSFiddles

SubMenu

Directed to Page

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

【讨论】：

嘿，非常感谢....它可以工作，但是该部分来了，它会在几秒钟内恢复到默认内容知道为什么会发生这种情况吗？？
现在试试，一不小心没做最新版。重新运行链接。
嘿需要另一个帮助..你知道我如何从另一个页面调用这个函数......例如。如果我使用与子菜单相同的部分来指向此页面并使该特定部分可见。

【解决方案2】：

你绝对不应该有重复的 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>

【讨论】：

当您确定正确的点击后，您就可以为所欲为
有什么问题？在我的代码中，我识别了点击，现在您需要在每次点击时采取正确的操作，您明白吗？
嘿，是的，我做到了......但它没有改变......然后我使用了其他代码......但我后来也调试了这个......当 href 属性存在时它没有打开...