Question

我有两个在视图中隐藏的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();
        });
   });
});

因为我还在学习，所以都不是很有说服力！

感谢您提前提供任何帮助

Answer 1

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

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

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

这是你想要做的吗？点击link1 - ＆gt;显示div1，隐藏div2。点击link2 - ＆gt; show div2 hide 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();
});

Answer 2

jsBin demo

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

  <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

好吧？

Answer 3

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

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

它将返回 true 或 false ;

Answer 4

这是一个棘手的问题，因为您正在处理点击时会触发的点击事件，并且您无法控制用户点击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();
    });
  });
});

Javascript if / else语句为hide / show divs

4 个答案:

jsBin demo