gpt4 book ai didi

Make a clickable link with onclick but without href=#?(使用onclick创建一个可点击的链接,但不使用href=#?)

转载 作者:bug小助手 更新时间:2023-10-28 09:43:48 24 4
gpt4 key购买 nike



I have a set of clickable identifiers on my page. About hundred, like 'cat1', 'cat2', 'dog1', 'dog2', 'dog3' etc. Then I have a function IDClick(id) {}

我的页面上有一组可点击的标识。大约一百个,比如‘cat1’,‘cat2’,‘dog1’,‘dog2’,‘dog3’等等。然后我有一个函数IDClick(Id){}



I need those identifiers clickable in HTML, to achieve that I used <a> tag with onclick

我需要这些标识符在HTML中可点击,以实现我使用标记与onclick



<a onclick=IDClick(id)>id</a>


now it works, but the cursor will not change when it is hovered over the clickable element.

现在它可以工作了,但是当光标悬停在可点击元素上时,它不会改变。



So I try to add href=#

因此,我尝试添加href=#



<a href=# onclick=IDClick(id)>id</a>


Now the cursor is OK, but when I click the item, the URL in the browser location bar will change. This is not desired.

现在光标正常,但当我单击该项目时,浏览器位置栏中的URL将更改。这不是我们所希望的。



How to get the mixed behavior?

如何获得混合行为?



I do not need underline as well.

我也不需要下划线。


更多回答

You're missing quotes on your attributes.

您的属性上缺少引号。

@SuperScript: Quotation marks are optional in HTML, if the attribute value doesn't contain a space (and maybe >).

@SuperScript:如果属性值不包含空格(也可能是>),则引号在HTML中是可选的。

@FelixKling : It's still cleaner. I wasn't suggesting that that was the error.

@FelixKling:还是更干净。我并不是说这就是错误所在。

This is just an example, actual code looks like this <a href=# onclick=IDClick("'+animals[0]+animal+'")>'

这只是一个示例,实际代码如下所示


You need to stop the browser from doing it's default action.

您需要停止浏览器执行其默认操作。



<a href="#" onclick="IDClick(id);event.preventDefault();">id</a>


When you click on a link, the default action is to go to that address. event.preventDefault(); prevents the browser from doing the default action.

当你点击一个链接时,默认操作是转到该地址。Vent.prevenentDefault();阻止浏览器执行默认操作。



This is a significantly better solution for accessibility. Quoting @aij's comment above: "using CSS makes it look ok, but still leaves it inaccessible from the keyboard (ie, tab will never focus the link)".

这是一个明显更好的可访问性解决方案。引用@aij上面的评论:“使用css让它看起来不错,但仍然让它无法通过键盘访问(也就是说,Tab永远不会聚焦于链接)”。



You can use CSS to force the cursor to change on hover of the clickable element:

您可以使用CSS来强制光标在可单击元素悬停时发生变化:



.myClickableThingy {
cursor: pointer;
}


And then you can switch back to <span>s or whatever of element you were using before <a> tags.

然后,您可以切换回S或您在标记之前使用的任何元素。



Give your anchor element a class and style it to achieve what you need:

为您的锚元素指定一个类,并设置其样式以实现您所需的效果:



<a class='kinda-link' onclick='whatevs()'>Hi I'm a kinda-link</a>


And your css:

和你的css:



a.kinda-link:hover { cursor: pointer; }


Recently I use clickable spans in most cases.

最近,我在大多数情况下都使用可点击跨度。





    Some text with some
<span onclick="alert('hey there')"
style="color: blue; cursor: pointer">part</span>
that is clickable.





Use return false; in the IDClick handler function.

在IDClick处理程序函数中使用返回FALSE;。



<a href=# onclick=IDClick(id)>id</a>

<a href=# onclick=IDClick(id)>id



IDClick() {

...
return false;

}


If you set href='javascript:IDClick(id)' then it will work as expected AND show the desired cursor behavior.

如果您设置了href='javascript:IDClick(id)',那么它将按预期工作并显示所需的光标行为。


更多回答

I think this one is better than approved answer because you don't need manipulate css

我认为这个答案比批准的答案更好,因为您不需要操纵css

I'd put the preventDefault call in the click handler function, but otherwise, this is a much better solution than the accepted answer.

我会在点击处理程序函数中放入PrevenentDefault调用,但除此之外,这是一个比公认的答案好得多的解决方案。

This is better than the accepted answer because the browser will show the url somewhere like at the bottom left which is something many people are used to.

这比公认的答案更好,因为浏览器会在左下角的某个地方显示URL,这是许多人已经习惯的。

what does it mean "Switch back to whatever element types you were using before tags"?

“切换回您在标记之前使用的任何元素类型”是什么意思?

My apologies. I was unclear. I meant use divs or spans instead of anchor elements.

我很抱歉。我当时不太清楚。我的意思是使用div或span而不是锚元素。

I tried divs, but they will span across whole page and making them auto-sized seems a too complicated task.

我试过div,但它们会跨越整个页面,让它们自动调整大小似乎是一项过于复杂的任务。

Spans should do it then. Or the other solutions proposed that abort the default behavior. You have several options.

斯潘斯应该会做到这一点。或者提出的其他解决方案中止了默认行为。您有几个选择。

Using CSS makes it look ok, but still leaves it inaccessible from the keyboard. (Ie, tab will never focus the link.)

使用CSS使它看起来不错,但仍然无法从键盘访问。(Ie,tab永远不会聚焦链接。)

This won't let you tab to the element/give it focus.

这不会让您使用Tab键定位到元素/使其获得焦点。

@SuperScript was that a requirement in the OP question?

@SuperScrip这是OP问题中的要求吗?

No, just an accessibility problem. It'll work, just not really best practice.

不,只是一个可访问性的问题。它会奏效的,但不是真正的最佳实践。

@SuperScript yeah but I don't think he needs a anchor in the first place

@SuperScrip是的,但我认为他一开始就不需要主持人

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