Question

我上面有四个按钮和四个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并隐藏其他人。我尝试了很多东西，但我失败了。

对不起我的英文，干杯。

Answer 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()
    }
});

Answer 2

以下情况应该有效。

$("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();
    }
});

Answer 3

我讨厌只是指向一个链接，但我创建了一个非常轻量级的jQuery脚本来处理这样的东西，你可能觉得它很有用：http://cferdinandi.github.com/tabby/。

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

Answer 4

不要jQuery .hide（）和.show（）做这个工作吗？

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

Answer 5

将以下第二行添加到您的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>

Answer 6

请参阅此示例：JsFiddle。我对javascript和html进行了一些更新;

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

 $(".mediaoptions").hide();
 $("#"+$(this).data("target-div")).show();
});

Answer 7

这是工作的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");
    });

隐藏div点击其他

7 个答案: