5

クラスですべてのものを非表示にしてから、.Hideクリックしたリンクに応じて特定のdivを表示したいと思います。これまでに入手しましたが、もっと簡単な方法はありますか？

これまでの私のコード:(JQueryを使用）

$(".btn").click(function (){
        $(".Hide").hide("fast");
    });

    $("#btn_one").click(function () {
        $("#one").show("fast");
    });

    $("#btn_two").click(function () {
        $("#two").show("fast");
    });

    $("#btn_three").click(function () {
        $("#three").show("fast");
    });

HTML：

<a href="#" id="btn_one" class="btn">one</a>
<a href="#" id="btn_two" class="btn">one</a>
<a href="#" id="btn_three" class="btn">one</a>

<div id="one" class="Hide">1</div>
<div id="two" class="Hide">2</div>
<div id="three" class="Hide">3</div>
4

5 に答える 5

3

データ属性はオプションである可能性があります：

$(".btn").click(function () {
    $(".Hide").hide("fast");
    $("#" + $(this).data('type')).show("fast"); 
});

HTML：

<a href="#" id="btn_one" data-type="one" class="btn">one</a>
<a href="#" id="btn_two" data-type="two" class="btn">one</a>
<a href="#" id="btn_three" data-type="three" class="btn">one</a>

data-something対応する要素を参照するために使用できます。

http://jsfiddle.net/dfsq/u8CAD/

于 2013-03-13T11:58:07.170 に答える
2

今のところ、それはあなたがそれを作ることができるのとほぼ同じくらい良いと思います（あなたは関数とすべてからの参照に隠しコードを置くことができますが、それはほぼ同じです）。

HTMLコードを少し変更しrel、関連する要素のIDを含む属性をボタンに追加できる場合は、コードを実際に改善できます（私は使用して.click()いますが、jQueryのバージョンで変更できる場合はに変更する必要があります.on()） ：

$('.btn').click(function() {
  $('.Hide').hide("fast");
  $('#'+$(this).attr('rel')).show("fast");
}

そして関連するHTML

<a href="#" id="btn_one" class="btn" rel="one">one</a>
<div id="one" class="Hide">1</div>
于 2013-03-13T11:59:14.937 に答える
1

一方通行

$("a.btn[id^=btn]").click(function() {
    $(".Hide").hide("fast");
    var id = $(this).attr('id').substring(4);
    $("#" + id).show("fast");
});

デモ：フィドル

于 2013-03-13T12:02:26.553 に答える
0

リンクとdivが別のコンテナにあると仮定すると、次のように使用できます。

<nav>
    <a href="#" class="btn">one</a>
    <a href="#" class="btn">two</a>
    <a href="#" class="btn">three</a>
</nav>

<div>
    <div class="Hide">1</div>
    <div class="Hide">2</div>
    <div class="Hide">3</div>
</div>

JavaScript

$('.btn').click(function() {
     $(".Hide").hide("fast").eq( $(this).index() ).show("fast");
});

デモ

http://jsfiddle.net/TUrgG/

data-*これはidや-attributesを必要としません。

于 2013-03-13T12:05:20.167 に答える
-4

まず、次の方法ですべてを非表示にできます。

$(".Hide").hide();

その後、クリックしたリンクのIDを解析して、表示する必要のあるIDまたはDIVを取得する必要があります。そのためにあなたはすることができます：

var id = $(this).attr("id").replace("btn_", "");

このソリューションは、現在のHTML構造に基づいており、変更はありません。

ただし、data-*IDを格納するために属性を使用することをお勧めします。完全なソリューションは次のようになります。

<a href="#" id="btn_one" data-showid="one" class="btn">one</a>
<a href="#" id="btn_two" data-showid="two" class="btn">two</a>
<a href="#" id="btn_three" data-showid="three" class="btn">three</a>

<div id="one" class="Hide">1</div>
<div id="two" class="Hide">2</div>
<div id="three" class="Hide">3</div>

次のjavascript/JQueryを使用します。

$(".btn").click(function(e){
   e.preventDefault();
   $(".Hide").hide();
   var id = $(this).data("showid");
   $("#" + id).show();
});

これが実際の例です

于 2013-03-13T11:58:08.907 に答える