Переключайтесь между контентом с помощью jQuery

Question

Мне нужна помощь по этому вопросу:

Мне нужно сделать что-то подобное, и моих знаний о jQuery просто недостаточно: (

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

<div id="dog"></div>
<div id="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

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

Надеюсь, это поможет.

Боб

Answer 3

Вот jsfiddle кода, который будет работать для вас, однако для масштабирования вам понадобится небольшое количество кода (вам нужно будет добавить к $ ('# dog, #cat'). Hide () ; выведите все лишние элементы, чтобы скрыть):

http://jsfiddle.net/KRPZS/

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

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:

<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>