Первоначальная проблема здесь состоит в том, что вы только связывание события щелчка, если контейнер виден. Вы хотите связать событие и проверить состояние внутри обратного вызова.
$("#container1").hide();
$("#link1").click(function() {
if ($("#container1").is(":visible")) {
$("#container1").hide();
$("#container2").show();
};
});
$("#link2").click(function() {
if ($("#container2").is(":visible")) {
$("#container1").show();
$("#container2").hide();
};
});
http://jsfiddle.net/S8h5v/1/
Стоит говорить о том, почему это происходит и почему вы ожидали другого результата. Чтобы сделать это, мы должны пройти через стек выполнения для каждого примера:
hide the container1 element
check if container1 is visible (it isn't) and if so:
add a callback to the click event of link1 element
check if container2 is visible (it is) and if so:
add a callback to the click event of link2 element
user clicks link2
callback registered to link2 click is fired
show container1
hide container2
теперь вы можете видеть, что даже если пользователь не нажмет LINK1 будет никакого эффекта, так как обратный вызов не был зарегистрирован.
Существует несколько более идиоматических способ подойти к этой проблеме, которая должна создать JQuery плагин, что-то вроде следующего:
// http://jsfiddle.net/S8h5v/5/
// js:
$.fn.tabSample = function(){
$(this).each(function(idx, el){
var $this = $(this);
$this.delegate('.tabs div', 'click', function(event){
var index = $this.find(".tabs div").index(event.target);
$this.find(".contents div").removeClass('active');
var item = $this.find(".contents div:eq(" + index + ")").addClass('active');
console.log(item, index);
});
$this.find('.contents div:eq(0)').addClass('active');
});
};
// html
<div class="tab-control">
<div class="tabs">
<div>Link 1</div>
<div>Link 2</div>
</div>
<div class="contents">
<div>container 1</div>
<div>container 2</div>
</div>
</div>
// css
.tab-control .tabs div {
display: inline-block;
cursor:pointer;
padding:10px 30px;
background-color:blue;
border: solid 1px lightblue;
}
.tab-control .contents div {
display: none;
width:100%;
height:100px;
background-color:red;
}
.tab-control .contents div.active {
display: inline-block;
}
Причина вы можете попробовать этот подход является повышает гибкость кода , Например, чтобы добавить новые элементы контента, вы можете просто добавить новый элемент div в элемент tabs и новый div к элементу контента, после чего они автоматически подключатся для поддержки табуляции. Вы также можете изменить способ, с помощью которого «показывать» и «скрывать» делаются путем улучшения определения .active css, поэтому в более современных браузерах вы можете использовать css3-переходы и анимации. Кроме того, это позволяет вашему код переносимым, поэтому если у вас есть несколько элементов управления вкладки на одной странице вы можете создать их, не прибегая к столкновениям:
$(".first-tabset").tabSample();
$(".second-tabset").tabSample();
// any elements within these sets will not affect the other.
Я знаю, что вы хотите, чтобы все было просто, на всякий случай вы хотите добавить дополнительные вкладки (таким образом вам не придется копировать код n раз) http://jsfiddle.net/S8h5v/2/ – Spokey
Споки, это потрясающе! – user2950370