使用 jQuery 在内容之间切换

Question

我在这方面需要一些帮助：

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

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

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

我们有两个按钮。当您单击狗按钮时，当您单击cat-button，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

这是一段适合您的代码，但是要扩展，您将需要进行少量编码（您需要添加到 $('#dog, #cat').hide(); 行 all要隐藏的额外 div）：

http://jsfiddle.net/KRPZS/

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

Answer 3

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 4

您可以尝试以下方法：

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 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/希望

这有帮助。

鲍勃