Question

我需要一些帮助：

我必须做这样的事情，而我的jQuery知识还不够：（

<div id="dog-button"></div>
<div id="cat-button"></div>

<div id="dog"></div>
<div id="cat"></div>

我们有两个按钮。当你点击狗按钮时，当你点击cat-button时会出现dog-div，cat-div出现（在确切的位置，但我想这只是CSS）。重要的是，该网站加载了狗，并没有显示任何东西。你有什么想法？： - （

Answer 1

$("#dog-button,#cat-button").click(function() {
    var divToOpen = $(this).attr("id").replace("-button","");
    $("#dog,#cat").hide();
    $("#"+divToOpen).show();
});

演示： http://jsfiddle.net/uhcHV/

Answer 2

HTML：

<div id="dog-button"></div>
<div id="cat-button"></div>

<div id="dog"></div>
<div id="cat" style="display: none;"></div>

使用Javascript：

<script type="text/javascript">
    $(function(){
        $('#dog-button').click(function(){
            $('#cat').hide();
            $('#dog').show();
        }

        $('#cat-button').click(function(){
            $('#dog').hide();
            $('#cat').show();
        }
    });
</script>

Answer 3

你可以尝试这些方法：

HTML：

<div class='button' id="dog-button"></div>
<div class='button' id="cat-button"></div>

<div class='content' id="dog"></div>
<div class='content' id="cat"></div>

使用Javascript：

$(document).ready(function () {
    $('#cat').hide();

    $('.button').click(function(){
        $('.content').toggle();
    });
});

Answer 4

这是一个适合您的代码，但是为了扩展，您需要进行少量编码（您需要添加到$（'＃dog，＃cat'）。hide（） ;排除所有额外的div以隐藏）：

http://jsfiddle.net/KRPZS/

$('div[id$="-button"]').live('click', function () {
    $('#dog, #cat').hide();
    $('#' + $(this).attr('id').replace('-button', '')).show();
});

Answer 5

以下是您正在寻找的内容：

HTML

<a href='#' data-id='dog' class='button'>Dog Button</a>
<a href='#' data-id='cat' class='button'>Cat Button</a>

<div id='dog' class='animal'>Woof!</div>
<div id='cat' class='animal'>Meow!</div>

CSS

.animal{
 display:none;  
   margin: 10px;
   padding: 10px;
   border: 1px solid #f2f2f2; 
}

JAVASCRIPT

$(document).ready(function(){

    $('.button').click(function(evt){
        evt.preventDefault();

        var id = $(this).data('id');
        $('.selected').hide().removeClass('selected');
        $('#' + id).addClass('selected').show();   
    });

});

看看这个jsFiddle：http://jsfiddle.net/KVvQV/

希望这有帮助。

鲍勃

使用jQuery在内容之间切换

5 个答案: