gpt4 book ai didi

javascript - 使用 "a href"启动 javascript 函数

转载 作者:搜寻专家 更新时间:2023-10-31 08:13:29 25 4
gpt4 key购买 nike

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

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

提前谢谢你。

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

最佳答案

不使用带有超链接引用属性的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

关于javascript - 使用 "a href"启动 javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49933879/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com