Question

我正在接受挑战。当页面加载时，我有两个divs，一个设置为display:none; 我有两个相应的链接。当用户点击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();
    }
  });

});

这是Demo

Answer 2

首先，请在此处提出问题的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 3

取决于您的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 4

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

Ignore the selectors, I'm lazy.

HTML - ＆gt;

<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 - ＆gt;

#div1{
  display:none;   
}

jQuery - ＆gt;

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

Answer 5

你对jquery感到厌烦吗？这可以使用普通的旧JavaScript来完成。

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

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

7 个答案: