Question

我想使用“a href”在javascript中启动一个函数但没有成功。如何使用“a href”来启动javascript函数？任何帮助将不胜感激。

我正在尝试使用侧边栏中的href元素来更改div“main”中显示的div。我实际上不确定代码的哪一部分是问题，但无论如何，我真的很感谢有人帮我看看并给我一些关于如何使用“a href”元素启动javascript函数的指示。 / p>

提前谢谢。

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
document.addEventListener('mousemove', function(event) {
  console.log(event.clientX);
  if (event.clientX < 250) {
    openNav();
  } else {
    closeNav();
  }
})

function openTab(tabName) {
	var x = document.getElementsByClassName("tab");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block"; 	
}

	

</script>

<body>

<div id="mySidenav" class="sidenav">
  <h1>Course Select</h1>
  <h2>English</h2>
  <a href="#" onlick="javascript:openTab('e1');">Course 1</a>
  <a href="javascript:alert('Hello World!');">Course 2</a>
  <a href="#" onclick="openTab('e3')">Course 3</a>
  <h2>Physics</h2>
  <a href="#" onclick="openTab('p1')">Course 1</a>
  <a href="#" onclick="openTab('p2')">Course 2</a>
  <a href="#" onclick="openTab('p3')">Course 3</a>
  <h2>ICT</h2>
  <a href="#" onclick="openTab('i1')">Course 1</a>
  <a href="#" onclick="openTab('i2')">Course 2</a>
  <a href="#" onclick="openTab('i3')">Course 3</a>
	<a href="#" onclick="openTab(help)">Help</a>
</div>	
	<button class="button button1" onlick="openTab('e1')">PUSH ME</button>
<div id="main">

	  
<div id="help" class="tab" >
  <center><iframe src="homepage.html"></iframe></center>
</div>
<div id="e1" class="tab" >
  <center><iframe src="coursee1.html" style="display:none"></iframe></center>
</div>
<div id="p1" class="tab" >
  <center><iframe src="coursep1.html" style="display:none"></iframe></center>
</div>
<div id="i1" class="tab" >
  <center><iframe src="coursei1.html" style="display:none"></iframe></center>
</div>
	  

</div>
</body>

Answer 1

一个不使用带有超链接引用属性的a标记来启动javascript代码执行，这是不可能的。将用户操作转换为javascript代码执行的正确方法是使用DOM事件，onclick在您的案例中特别感兴趣。

<a href="javascript:alert('Hello World!');">Course 2</a>

如果使用onclick事件，此声明将转换为

<div onclick="alert('Hello World!')">Course 2</div>

请注意，必须手动应用样式，因此如果您希望快速保留元素的可视行为，正如MEE在评论中指出的那样，您可以轻松编写

<a href="#" onclick="alert('Hello World!')">Course 2</a>

此外，考虑到CertainPerformance在评论中发现的有用建议，在编写无框架项目和安全的同时，以内联html方式分配DOM事件处理程序以及任何与javascript代码相关的内容是一种不好的做法。，成熟的方法是：

// Given a reference to the the dom object which needs to have an event handler
domObject.addEventListener("click", myScript); // where myScript is an event handler declared, for instance, in global scope

进一步阅读：

https://www.w3schools.com/jsref/dom_obj_event.asp https://www.w3schools.com/jsref/event_onclick.asp

使用“a href”启动javascript函数

1 个答案: