'href'单击时不显示输出

'href' Not Showing Output on Click

本文关键字：显示 输出 单击 href      更新时间：2023-09-26

我试图让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中的#表示id为divID的任何元素，而仅使用divID将搜索divID标签（类似于<divID></divID>）

有关ID选择器的更多文档，请参阅此处，这里列出了您可以使用的所有CSS选择器，包括元素选择器，以便您理解为什么以前的代码不起作用。

您也可以在将来组合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>

将此添加到您的页面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后：

$('#divID').toggle();

我看到你在使用jQuery，对吧？所以我在jQuery中写下了你的答案。。

$('.toggle').click(function () {
    var selected = $(this).attr('href');
    $('.expandable'+selected).toggle();
});

查看jsfiddle

如果您不使用jQuery，那么这里是javascript版本（html已更改）。

var expandable = document.getElementsByClassName("expandable");
for (i = 0; i < expandable.length; ++i) {
    expandable[i].setAttribute('style','display: none;');
}
var toggle = document.getElementsByClassName("toggle");
for (i = 0; i < toggle.length; ++i) {
    toggle[i].setAttribute('onclick','toggler(this)');
}
function toggler(obj) {
    var id = obj.dataset.toggle,
        el = document.getElementById(id);
    el.style.display = (el.style.display != 'none' ? 'none' : '');
}

查看jsfiddle

相关文章：