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); 
});