需要如何让它发挥作用的建议

need advice on how to get this to work

本文关键字：作用      更新时间：2023-09-26

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

这里有一个正在工作的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

子菜单

定向到页面

JSFiddle的行为会让他们表现得有点奇怪，JSFiddel会打开iframe中的链接。JSFiddle中的代码都是mock，因为JSFiddl阻止您获取JSFiddleURL。在普通网站上，你可以取消对代码的评论，并删除其他虚假代码。

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

相关文章：