' HREF'单击时不显示输出

时间:2014-11-04 18:06:31

标签: javascript html

我试图让href链接在点击时展开/显示额外的文字,但是当我点击它时没有任何事情发生。

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

下面是代码:

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

我正在努力保持代码尽可能短,因为上面的代码必须为每个链接重复数百次。

3 个答案:

答案 0 :(得分:2)

假设您正在使用jQuery,则错误地使用了CSS选择器。你的行应该是这样的:

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

#中的#divID代表id divID的所有元素,而只使用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>

答案 1 :(得分:0)

将此添加到您的页面:

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

然后:

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

答案 2 :(得分:0)

我看到你正在使用jQuery,对吗?所以我在jQuery中写了你的答案..

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

Check out the 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' : '');
}

Check out the jsfiddle