使用javascript显示/隐藏divs说明

Question

已经提出了一个非常相似的问题，并且部分解决了我的问题，但是我想知道在本示例中是否可以使用class或id NAMES代替ul li .menu ， #menu .menu等。

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

js：

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

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

如果这个问题很愚蠢，请事先道歉，但是我已经想了很长时间了，无法弄清楚。

Answer 1

是的你可以：

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

根本不需要使用循环。

这是一个演示

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; 职位：相对

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

摆弄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/