css jquery隐藏一个div，显示另一个

我正在接受挑战。 我有2个divs ，一组display:none; 在页面加载时的CSS中我有两个相应的链接。 当用户点击link1我想显示div1并隐藏div2 。 当用户点击link2我想显示div2并隐藏div1 。

我无法让这个工作！ 任何帮助非常感谢。 小号

Answer 1

这是一个例子：

 $(function () { $(".div1, .div2").hide(); $(".link1, .link2").bind("click", function () { $(".div1, .div2").hide(); if ($(this).attr("class") == "link1") { $(".div1").show(); } else { $(".div2").show(); } }); }); 

这是演示

Answer 2

首先，无论何时在这里提问，请提供您的问题的HTML。

其次，你可以做点什么……

Answer 3

取决于您的HTML结构

如果是这样的话

 ​link1 link2 
 div for link 1
 
 div for link 2 

然后jQuery代码看起来像这样

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

http://jsfiddle.net/NXdyb/

Answer 4

这是一个非常简单的原则……你可以通过很多方式实现它，这只是一个例子。

忽略选择器，我很懒。

HTML – >

  Show Div 1  |  Show Div 2  

 
 Div 1 
 
 Div 2  

CSS – >

 #div1{ display:none; } 

jQuery – >

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

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

然后在你的link1中：

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