0

その上に4つのボタンと4つのdivがあります。一度に1つのdivだけにしたいのですが、4つのボタンを表示し続けます。

これがボタンのhtmlです

HTML

<div id="container">
<a><p id="firstBtn" class="mediabutton"><span class="icon"></span>button1</p></a> <!-- 1st button -->
<div id="firstDiv" class="mediaoptions" >
... <!-- stuff of the div -->
</div>

 <a><p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p></a> <!-- 2st button -->
<div id="sndDiv" class="mediaoptions" >
... <!-- stuff of the div -->
</div>

これにより、どのボタンがクリックされたかを認識できます

Javascript

$("container").click(function(event){
var that = event.target.id;
 if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn") )
    &&  !($("#"+that).hasClass("active"))
)
{
    //Here comes the stuff
}
});

今。クラスではactive、ボタンを強調表示します。ボタンを1つだけハイライトしたい。はsndDivに設定されdisplay : block、その他はに設定されdisplay: noneます。

要約を作成する：ボタンを押して、その上にdivを表示し、他のすべての人を非表示にします。本当にたくさんやってみましたが、失敗しました。

私の英語でごめんなさい、乾杯。

4

7 に答える 7

1

に置き換えるだけBtnでDiv、表示したい要素があり、他の要素には共通のクラスがあり、簡単にターゲットにできます。

$("#container").on('click', '.mediabutton', function(event){
    var that = event.target.id,
        elem = $('#' + that.replace('Btn','Div'));

    if( !$("#"+that).hasClass("active") ) {
        $('.mediaoptions').not(elem).hide();
        elem.show()
    }
});
于 2013-02-20T19:02:17.790 に答える
1

以下が機能するはずです。

$("container").click(function(event){
    var that = event.target.id;
    if(((that == "firstBtn") || (that == "sndBtn") || (that == "trdBtn") || (that == "fourBtn") ) &&  !($("#"+that).hasClass("active")))
    {
        $('.mediaoptions').show();
        $('#'+that.replace('Btn','Div')).show();
    }
});
于 2013-02-20T19:03:35.023 に答える
1

リンクを紹介するのは嫌ですが、http：//cferdinandi.github.com/tabby/のように、このようなものを処理するための非常に軽量なjQueryスクリプトを作成しました。

既存のコードを変更して機能させるよりも、それを再利用する方が簡単な場合があります。

于 2013-02-20T19:14:42.483 に答える
0

動作するjsFiddleは次のとおりです。http：//jsfiddle.net/CtqUU/

これを使用すると、必要な数<div>の<button>要素を含めることができます。class名前を変更しid、必要に応じて必要に応じて変更します。

HTML：

<div class="hidden" id="box1">Box 1</div>
<button value="box1">Box 1</button>
<div class="hidden" id="box2">Box 2</div>
<button value="box2">Box 2</button>

CSS：

    div {
        width: 200px;
        height: 200px;
        border: 1px solid #000000;
    }
    .hidden {
        display: none;
        visibility: hidden;
    }

JS：

    $("button").click(function(){
        var val = $(this).val();
        $("div").addClass("hidden");
        $("#"+val).removeClass("hidden");
    });
于 2013-02-20T19:12:13.117 に答える
0

jQuery .hide（）と.show（）は仕事をしませんか？

http://api.jquery.com/hide/

于 2013-02-20T18:57:44.673 に答える
0

以下の2行目をJavaScriptに追加して、アラートの内容を確認してください。

var that = event.target.id;
alert(that);

おそらく次のようなことを達成しようとしているのか正確にはわかりません。

<a href="#" onclick="$('.mediaoptions').hide(); $('#sndDiv').show(); return false;"><p id="sndBtn" class="mediabutton active"><span class="icon"></span>button2</p></a>
于 2013-02-20T18:59:09.643 に答える
0

この例を参照してください：JsFiddle。javascriptとhtmlにいくつかの更新を加えました。

$(".mediabutton").click(function(event){
 $(".mediabutton").removeClass("active");
 $(this).addClass("active");

 $(".mediaoptions").hide();
 $("#"+$(this).data("target-div")).show();
});
于 2013-02-20T19:01:58.303 に答える