1

我有两个隐藏在视图中的 div，直到单击相应的图像链接。照原样，两个 div 可以通过单击一个然后另一个同时显示，我不希望这样。我正在尝试编写一个 if 语句，说明如果单击了另一个将不会显示，但我没有运气。这是我使用的 javascript 不起作用：

 $("#about").click(function () {
    if ($("#aboutdetails").fadeIn("slow") == 'true') {
    $("#contact").css({'display': 'none'});
    }
$("#aboutdetails").click("slow",function () {
        $(this).hide();     
    });
});


$("#contact").click(function () {
    if ($("#contactdetails").fadeIn("slow") == 'true') {
    $("#about").css({'display': 'none'});
    }
$("#contactdetails").click("slow",function () {
        $(this).hide();
    });
});

这是我尝试 if 语句之前的原始代码：

 $("#about").click(function () {
    $("#aboutdetails").fadeIn("slow", function() {
    $("#aboutdetails").click("slow",function () {
            $(this).hide();
        });
    });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#contactdetails").click("slow",function () {
           $(this).hide();
        });
   });
});

两者都不是很有口才，因为我还在学习！

感谢您提前提供任何帮助

4

4 回答 4

1

所以你有两个不同的 div，分别命名为“div1”和“div2”，链接为“link1”和“link2”......

$('#link1').click(function() {
    $('#div1').show();
    $('$div2').hide();
});

$('#link2').click(function() {
    $('#div2').show();
    $('$div1').hide();
});

那是你想要做的吗？点击link1 -> 显示div1，隐藏div2。点击link2 -> 显示div2 隐藏div1？

我不确定这是否是你想要的。如果不是，请尝试澄清您的问题。

使用您网站中的代码示例进行编辑：试试这个

$("#about").click(function () {
  $("#aboutdetails").fadeIn("slow", function() {

  });
  $("#contactdetails").hide();
});


$("#contact").click(function () {
$("#contactdetails").fadeIn("slow", function() {

});
$("#aboutdetails").hide();
});

$("#aboutdetails").click(function() {
   $("#aboutdetails").hide();
});
 $("#contactdetails").click(function() {
    $("#contactdetails").hide();
});
于 2012-07-28T01:08:02.640 回答
1

jsBin 演示

实际上......对于您的内容使用classes（例如：）会更简单，而s 仅用于您的按钮：.boxID

  <ul id="nav">
    <li id="about">ABOUT</li>
    <li id="contact">CONTACT</li>
  </ul>
  
  <div class="box aboutdetails">
    About details here..........
  </div>
  
  <div class="box contactdetails">
    Contact details here..........
  </div>

比你需要的是：

$('#nav li').click(function(){              // any li 'button'
  $('.box').hide();                         // hide opened
  $('.'+this.id+'details').fadeIn(600);     // this.id will take the button's ID
});

这个脚本的作用是：

  • 在任何按钮上单击全部隐藏.box
  • 注册被点击按钮的 ID ( this.id) 并搜索具有类似按钮ID+的类的元素details

不错吧？

于 2012-07-28T01:14:50.757 回答
0

您可以使用以下方法检查另一个是否可见：

$('#blabla').is(':visible')

它将返回true或false；

于 2012-07-28T01:07:18.873 回答
0

这是一个棘手的问题，因为您正在处理单击时将触发的单击事件，并且您无法控制用户单击 div 的时间，但是您可以做的是切换用户是否单击它使其可见并且隐藏其他。

这是它的代码

$("#about").click(function () {
 $("#aboutdetails").fadeIn("slow", function() {
  $("#contactdetails").hide();
  $("#aboutdetails").click("slow",function () {
   $(this).hide();
 });
 });
});


$("#contact").click(function () {
   $("#contactdetails").fadeIn("slow", function() {
    $("#aboutdetails").hide();
    $("#contactdetails").click("slow",function () {
     $(this).hide();
    });
  });
});
于 2012-07-28T01:11:52.397 回答