css jquery隱藏一個div，顯示另一個

Question

我有一個挑戰。 我有2 divs，一個設置爲display:none;在頁面加載時的css 我有兩個對應的鏈接。當用戶點擊link1我想顯示div1並隱藏div2。當用戶點擊link2時，我想顯示div2並隱藏div1。

我還沒有能夠得到這個工作！任何幫助非常感謝。 S

Answer 1

下面的例子：

$(function() { 
    $(".div1, .div2").hide(); 

    $(".link1, .link2").bind("click", function() { 
    $(".div1, .div2").hide();   

    if ($(this).attr("class") == "link1") 
    { 
     $(".div1").show(); 
    } 
    else 
    { 
     $(".div2").show(); 
    } 
    }); 

}); 

這裏是Demo

Answer 2

這是一個非常簡單的原則......您可以通過多種方式實現，這僅僅是一個例子。

Ignore the selectors, I'm lazy.

的HTML - >

<a href="#"> Show Div 1 </a> | <a href="#"> Show Div 2 </a> 
<br/><br/> 
<div id="div1"> Div 1 </div> 
<div id="div2"> Div 2 </div> 

的CSS - >

#div1{ 
    display:none; 
} 

jQuery的 - >

$('a:eq(0)').click(function(){ 
    $('#div1').toggle(); 
    $('#div2').toggle();  
}); 
$('a:eq(1)').click(function(){ 
    $('#div2').toggle(); 
    $('#div1').toggle(); 
}); 

Answer 3

首先，請提供的HTML您闕只要你在這裏問一個問題。

其次，你可以不喜歡..

<script> 
$(document).ready(function(){ 
    $("#div1").hide(); 
    $("#link1").on("click",function(){ 
     $("#div1").show(); 
     $("#div2").hide(); 
    }); 
    $("#link2").on("click",function(){ 
     $("#div2").show(); 
     $("#div1").hide(); 
    }); 
}); 
</script> 

Answer 4

根據您的HTML結構

，如果這樣的事情

​<a href='#'>link1</a> 
<a href='#'>link2</a> 
<div> div for link 1</div> 
<div> div for link 2</div> 

然後jQuery代碼看起來像這樣

$('a').click(function(e){ 
    $('div').eq($(this).index()).show(); 
    $('div').not($('div').eq($(this).index()).hide(); 
}); 

http://jsfiddle.net/NXdyb/

Answer 5

你是否死定jQuery？這可以簡單地用普通的舊JavsScript來完成。

function switchVisible() { 

if (document.getElementById['div1'].style.visibility == 'visible') { 
    document.getElementById['div1'].style.visibility = 'hidden'; 
    document.getElementById['div2'].style.visibility = 'visible'; 
} 
else { 
    document.getElementById['div1'].style.visibility = 'visible'; 
    document.getElementById['div2'].style.visibility = 'hidden'; 
} 

} 

然後在你的鏈接1：

<a href="/blah" onclick="javascript:switchVisible();"> 

Answer 6

看一看這個例子可能幫助你：http://jsfiddle.net/MUtPy/2/ ^^的方法有很多jQuery中做到這一點，但這個例子當然應該得到ü開始=）

Answer 7

那搗鼓幫助我，真的是可以理解的：http://jsfiddle.net/bipen/zBdFQ/1/

$("#link1").click(function(e) { 
    e.preventDefault(); 
    $("#div1").slideDown(slow); 
    $("#div2").slideUp(slow); 
}); 

$("#link2").click(function(e) { 
    e.preventDefault(); 
    $("#div1").slideUp(slow); 
    $("#div2").slideDown(slow); 
});