锚标签

Question

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

的位置

＆＃13;

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

＆＃13;

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

编辑：

这是两个JSFiddles

SubMenu

Directed to Page

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

需要有关如何使其发挥作用的建议

锚标签

部分标签

的JavaScript

2 个答案:

HTML

JS