0

我上面有四个按钮和四个 div。我想一次只有一个 div ，但一直显示四个按钮。

这是按钮的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让按钮被突出显示。我只想要一个按钮突出显示。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

我不想只给你一个链接，但我创建了一个非常轻量级的 jQuery 脚本来处理你可能会发现有用的东西： http: //cferdinandi.github.com/tabby/。

您可能会发现重新利用它比尝试修改现有代码更容易。

于 2013-02-20T19:14:42.483 回答
0

jQuery .hide() 和 .show() 不能完成这项工作吗？

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

于 2013-02-20T18:57:44.673 回答
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 回答
0

将下面的第二行添加到您的 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：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 回答