Question

已经提出了一个非常类似的问题，它已部分解决了我的问题，但我想知道在此示例中是否可以使用class或id NAMES而不是{{ 1}} - ul li，.menu等

css：#menu

JS：

div { display:none; background:red; width:200px; height:200px; }

以下是此示例的jsfiddle：http://jsfiddle.net/Z3Hj7/

如果这个问题很愚蠢，请提前道歉，但我已经习惯了一段时间而无法解决这个问题。

Answer 1

是的，你可以：

$(function() {
    $('#menu .list').click(function(e) {
        var i = $(this).index();
        $('div').hide();
        $('div:eq('+i+')').show();
    });
});

根本不需要使用循环。

Here is a demo

Answer 2

要改善你的js，你可以使用$.each函数的参数：

$(function() {
    $('ul li').each(function(i, e) {
        $(e).click(function() {
            $('div').hide();
            $('div:eq('+i+')').show();
        });
    });
});

Answer 3

前段时间我写了这个片段来隐藏任何带有id的内容。元素img，div，a，li ul，table等：都需要将样式设置为visible / relative 能见度：可见;职位：相对;

函数更改为隐藏隐藏元素，然后将位置设置为绝对值，以防止元素在其位置创建空白区域。

摆弄http://jsfiddle.net/ShawnsSpace/URRDy/

<div id="togglethis" style="visibility: visible; position: relative; border: 4px dotted;">Click the button to toggle this Div</div>

<button onclick="toggle('togglethis');">Toggle</button>

    <script type="text/javascript">
//<![CDATA[
function toggle(obj) {
    var item = document.getElementById(obj);
    if (item.style.visibility=='visible') {
        item.style.visibility = 'hidden';    
     }
    else {
        item.style.visibility = 'visible';
     }
     //
    if (item.style.position=='relative') {
    item.style.position = 'absolute'; 
    }
    else { 
    item.style.position = 'relative'; 
    }   
}
//]]>
</script>

Answer 4

在回答有关使用ID和类作为选择器的问题时，您可以： http://jsfiddle.net/Z3Hj7/1/

用javascript显示/隐藏div澄清

4 个答案: