显示和隐藏点击使用jquery许多div

我想创建一个菜单（没有下拉）使用jQuery。请检查下面的一些代码。显示和隐藏点击使用jquery许多div

如果我点击银河标签的链接，我想显示div属性的值为galaxyTab。同样，如果我点击Iphone的链接，我想隐藏前面的div（galaxyTab）并显示div属性值为iphone的div。这里是下面的代码

<div id="productMenu"> 
    <a href="galaxyTab" class="showproducts">Galaxy Tab</a> 
    <a href="iphone" class="showproducts">Iphone</a> 
    <a href="hpslate" class="showproducts">HP Slate</a> 
</div> 
Unlimited... like this 

<div id="article"> 
<div id="products" class="galaxyTab" style="">Galaxy Tab</div> 
<div id="products" class="iphone" style="display:none">Iphone</div> 
<div id="products" class="hpslate" style="display:none">HPslate</div> 
</div>

我可以实现通过下面的代码上述要求的fiddle，但问题是我有来从数据库中的菜单名称等信息，并有可能将围绕15的菜单项，所以下面的方法是不可行的。你能告诉我一个简单的方法来做到这一点。

感谢提前:)

$('a.showproducts').click(function(){ 
     var a_href = '.'+ $(this).attr('href'); 
        $('.galaxyTab').hide(); 
        $('.iphone').hide(); 
        $('.hpslate').hide(); 

        $(a_href).show(); 

     return false 
    });//.click function ends here

来源

2012-08-02 black_belt

您需要切换文章上的ID和类别。 Id应该是唯一的值。 – Jeemusu 2012-08-02 05:42:39

有几种预置的解决方案，将帮助你实现这一目标。根据你想如何工作的，有：

手风琴：

http://jqueryui.com/demos/accordion/

标签：

http://jqueryui.com/demos/tabs/

还有 - 你的HTML注释。你不应该为多个条目使用相同的ID - 因为ID是唯一的。

如果你在每个div上放置另一个类，你也可以编写这段代码来手动隐藏div，如果你不想放入像accordion或tabs这样的大组件。

http://jsfiddle.net/Sqgbb/

$('a.showproducts').click(function(e){ 
    e.preventDefault(); 
    var a_href = '.'+ $(this).attr('href'); 
    $('.products').hide(); 
    $(a_href).show(); 
});

来源

2012-08-02 05:40:50

这可能是比较可行的：

$('a.showproducts').click(function(e){ 
     e.preventDefault(); 
     var a_href = '.'+ $(this).attr('href'); 
     $('#products:not('+a_href+')').hide(); 
     $(a_href).show(); 
});

而应该class="product"，id是独一无二的。

来源

2012-08-02 05:41:21

试试这个代码：

$('a.showproducts').click(function(){ 
     var a_href = '.'+ $(this).attr('href'); 
        $('#article>div').hide(); 
             $(a_href).show(); 

     return false 
    });//.click function ends here

这将隐藏所有div无论是哪一个是前所示，然后只显示DIV一个你想要的。

更新fiddle- http://jsfiddle.net/Wvjbr/4/

来源

2012-08-02 05:44:24 user700284

会这样写：

$('a').click(function(event) { 
    $('.showproducts').hide(); 
    $(event.target).show(); 
})

BTW。：

你有一个以上的ID名称为 “产品”，这是不可能的
see here： https://stackoverflow.com/a/192066/1067061

希望它有帮助。

来源

2012-08-02 05:44:45 Moszeed

显示和隐藏点击使用jquery许多div

回答

相关问题