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

css jquery hide one div, show another

提问by user1568790

I am having a challenge. I have 2 divs, one set to display:none;in the css when the page loads I have two corresponding links. When the user clicks on link1I would like to show div1and hide div2. And when the user clicks on link2I would like to show div2and hide div1.

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

I have not been able to get this to work! Any help much appreciated. S

我一直无法让这个工作！非常感谢任何帮助。秒

回答by Besnik

Here an example:

这里有一个例子：

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

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

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

});

And here is the Demo

这是演示

回答by Kaustubh

Firstly,please provide the HTML for your question, whenever you ask one here.

首先，每当您在这里提问时，请提供您的问题的 HTML。

Secondly, you could do something like..

其次，你可以做一些像..

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

回答by ?????

Depending on your HTML structure

取决于您的 HTML 结构

if something like this

如果像这样

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

then jQuery code would look like this

那么 jQuery 代码看起来像这样

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

http://jsfiddle.net/NXdyb/

http://jsfiddle.net/NXdyb/

回答by Jeremy1026

Are you deadset on jquery? This can be done simply with normal old JavsScript.

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

}

Then have in your link1:

然后在你的链接1中：

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

回答by azzy81

Have a look at this example it might help you out: http://jsfiddle.net/MUtPy/2/^^ There are many ways to do this in Jquery but this example should certainly get u started =)

看看这个例子，它可能会帮助你：http: //jsfiddle.net/MUtPy/2/^^ 在 Jquery 中有很多方法可以做到这一点，但这个例子肯定会让你开始=）

回答by Ohgodwhy

This is a very simple principle...you can achieve it many ways, this is just one example.

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

Ignore the selectors, I'm lazy.

忽略选择器，我很懒。

The HTML ->

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>

The CSS ->

CSS ->

#div1{
  display:none;   
}

The jQuery ->

jQuery ->

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

回答by Igor Laszlo

That fiddle helped me, it is really understandable : http://jsfiddle.net/bipen/zBdFQ/1/

那个小提琴帮助了我，这真的可以理解：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);
});