2

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

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

4

7 回答 7

6

这里有一个例子：

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

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

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

});

这是演示

于 2012-08-01T14:14:15.643 回答
4

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

其次，你可以做类似..

<script>
$(document).ready(function(){
    $("#div1").hide();
    $("#link1").on("click",function(){
        $("#div1").show();
        $("#div2").hide();
    });
    $("#link2").on("click",function(){
        $("#div2").show();
        $("#div1").hide();
    });
});
</script>
于 2012-08-01T14:12:35.547 回答
2

取决于您的 HTML 结构

如果像这样

​&lt;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/

于 2012-08-01T14:13:28.663 回答
1

你对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();">
于 2012-08-01T14:13:44.083 回答
0

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

忽略选择器，我很懒。

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();   
});
于 2012-08-01T14:11:54.800 回答
0

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

于 2012-08-01T14:13:49.197 回答
0

那个小提琴帮助了我，这真的可以理解：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);
});
于 2013-09-17T23:01:17.727 回答