我试图让href链接在单击时扩展/显示额外的文本,但是当我单击它时,什么也没有发生。

当我运行html代码时,我可以单击链接,但由于某种原因它不会显示文本。
知道为什么吗?

这是代码:

<html>
<a href="#1" onclick="$('divID').toggle();">click to expand</a>
<div id="divID" style="display: none;">this is expanded</div>
</html>


我试图使代码尽可能短,因为每个链接的上述代码必须重复数百次。

最佳答案

假设您使用的是jQuery,则错误地使用了CSS选择器。您的行应为:

<a href="#1" onclick="$('#divID').toggle();">click to expand</a>


#中的#divID表示iddivID的任何元素,而仅使用divID会搜索divID标记(类似于<divID></divID>的东西)

See here for more documentation on the ID Selectorhere's a list of all the CSS selectors you can use(包括the Element Selector)供您了解为什么以前的代码不起作用。

您也可以结合使用CSS选择器来将来缩小选择范围,尽管ID选择器并不需要太多:

<a href="#1" onclick="$('div#divID').toggle();">click to expand</a>


并且如果您绝对坚持不使用jQuery:

<a href="#1" onclick="if (document.getElementById('divId').style.display == 'none') document.getElementById('divId').style.display = 'block'; else document.getElementById('divId').style.display = 'none';">click to expand</a>


或将其分解为自己的功能:

<script>
    function toggleElementById(id) {
        if (document.getElementById(id).style.display == 'none') {
            document.getElementById(id).style.display = 'block';
        } else {
            document.getElementById(id).style.display = 'none';
        }
    }
</script>
<a href="#1" onclick="toggleElementById('divId');">click to expand</a>

关于javascript - “href”在点击时不显示输出,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/26741988/

10-09 15:11