显示/隐藏的div澄清与JavaScript

高度类似的问题已经被问目前，它已经部分解决了我的问题，但我想知道如果class或id名称可以在这个例子中代替ul li - .menu ，#menu等显示/隐藏的div澄清与JavaScript

CSS：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/

如果这个问题很愚蠢，我会提前道歉，但是我一直在嘲笑它一段时间，并且弄不明白。

来源

2011-08-26 Northernlights

你能解释一下关于'class'和'id'的问题吗？ – JMax

该示例使用列表项元素，我宁愿使用类或id - 我只想让js应用于某些div。 – Northernlights

ÿ es，你可以：

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

根本没有必要使用循环。

Here is a demo

来源

2011-08-26 10:03:15 Shef

为了提高您的JS，你可以使用$.each函数的参数：

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

来源

2011-08-26 09:52:23 JMax

为什么'$ .each'会改善它？ – Northernlights

@Northernlights：我指出的是'$ .each'的使用，因为你已经有一个索引，并且不必使用'var i = $（this）.index（）;' – JMax

我前段时间写了这个片段到隐藏与一个id东西。元素img，div，a，li ul，table等：都需要将样式设置为可见/相对 visibility：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>

来源

2011-08-26 09:58:53

你应该看看style.display属性及其与style.visibility属性的不同之处。 – amal

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

来源

2011-08-26 09:59:24

你不需要循环。 – Shef

是的，你是对的，不能相信我没注意到。 –

显示/隐藏的div澄清与JavaScript

回答

相关问题