2

jqueryを使用してメニュー（ドロップダウンなし）を作成しようとしています。以下の私のコードのいくつかを確認してください。

Galaxy Tabのリンクをクリックすると、クラス属性の値がであるdivが表示されますgalaxyTab。同様に、iPhoneのリンクをクリックすると、前のdiv（galaxyTab）を非表示にして、クラス属性の値がである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(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 に答える
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が1つだけ表示されます。

更新されたフィドル-http ： //jsfiddle.net/Wvjbr/4/

于 2012-08-02T05:44:24.830 に答える
0

これを次のように記述します。

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

ところで：

「products」という名前のIDが複数ある場合、これは不可能
です： https ://stackoverflow.com/a/192066/1067061

それが役に立てば幸い。

于 2012-08-02T05:44:45.310 に答える