2

我正在尝试使用 jquery 创建一个菜单（无下拉菜单）。请检查我下面的一些代码。

如果我单击 Galaxy Tab 的链接，我想显示 class 属性值所在的 div galaxyTab。同样如果我点击Iphone的链接，我想隐藏之前的div（galaxyTab）并显示class属性值为的div iphone。这是以下代码的小提琴

<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>

我可以通过以下代码实现上述要求，但问题是我必须从数据库中获取菜单名称和其他信息，并且可能会有大约 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
4

4 回答 4

2

有几种预构建的解决方案可以帮助您实现这一目标。根据您希望它的工作方式，有：

手风琴：

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

标签：

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

另外 - 您的 HTML 的注释。您不应该对多个条目使用相同的 ID - 因为 ID 是唯一的。

如果您在每个 div 上放置另一个类，如果您不想放入像手风琴或制表符这样的大组件，也可以编写此代码来手动隐藏 div。

http://jsfiddle.net/Sqgbb/

$('a.showproducts').click(function(e){
    e.preventDefault();
    var a_href = '.'+ $(this).attr('href');
    $('.products').hide();
    $(a_href).show();
});
于 2012-08-02T05:40:50.343 回答
1

试试这个代码：

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

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

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

更新小提琴- http://jsfiddle.net/Wvjbr/4/

于 2012-08-02T05:44:24.830 回答
1

这可能更可行：

$('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-02T05:41:21.257 回答
0

会这样写：

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

顺便提一句。：

您有多个名为“产品”的 ID，这是不可能的，
请参见此处： https ://stackoverflow.com/a/192066/1067061

希望能帮助到你。

于 2012-08-02T05:44:45.310 回答