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

我有一个挑战。 我有2个

div

，其中一个设置为

显示：无
我有两个相应的链接。当用户单击
link1
时，我想显示
div1
并隐藏
div2
。当用户单击
link2
时，我想显示
div2
并隐藏
div1

我一直没能让它工作！非常感谢您的帮助。
这是一个非常简单的原则…你可以通过多种方式实现，这只是一个例子


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>

jQuery->

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

首先，当你在这里提问时，请为你的问题提供HTML

第二，你可以做一些像

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


$（文档）.ready（函数（）{
$（“#div1”）.hide（）；
$（“#link1”）。在（“单击”，函数（）上）{
$（“#div1”）.show（）；
$（“#div2”）.hide（）；
});
$（“#link2”）。在（“单击”，函数（）上）{
$（“#div2”）.show（）；
$（“#div1”）.hide（）；
});
});
取决于您的HTML结构

如果是这样的话

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

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

您在jquery上死气沉沉吗？这可以简单地用普通的Javscript来完成

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();">

看看这个例子，它可能会帮助你：^^在Jquery中有很多方法可以做到这一点，但这个例子肯定会让你开始学习=）
这里有一个例子：

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

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

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

});

这是小提琴帮助我的
，这是可以理解的：

您需要使用javascript代码来实现这一点，并根据单击的按钮更改div类
$(function () {
  $(".div1, .div2").hide();

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

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

});

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

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