Question

我正在制作我的第一个Bootstrap网站，最近我遇到了谷歌无法帮助我的第一个问题。
我正在寻找一种方法，在不使用切换的情况下将 div 元素设置为隐藏/取消隐藏。我有一个非常好的网站，它有三个大的“按钮”由一些均匀间隔的照片创建。我有三个div，每个都默认隐藏。点击每张照片应取消隐藏相应的div，同时保证隐藏其他两张照片。例如，单击“3D建模” - 图像应该隐藏/取消隐藏，同时还保证我的其他两个投资组合部分仍然关闭。

我可以通过使用切换轻松处理单击的部分，但在处理其他两个部分时却不那么简单。例如，所有三个开始关闭，（C C C）I然后单击第一个（O C C）然后单击第二个（O C C）。这意味着它们都是开放的。

这只是psudo-code，但这或多或少是我想要的：

onImageOneClick{
   DivOne.setHidden(false);
   DivTwo.setHidden(true);
   DivThree.setHidden(true);
}

onImageTwoClick{
   DivOne.setHidden(true);
   DivTwo.setHidden(false);
   DivThree.setHidden(true);
}

onImageTwoClick{
   DivOne.setHidden(true);
   DivTwo.setHidden(true);
   DivThree.setHidden(false);
}

这是我当前的代码：

<script>
  $("#thumb1").click(function(){
    $("#3DModel").toggleClass("hidden unhidden");
  });
  $("#thumb2").click(function(){
    $("#DigitalArt").toggleClass("hidden unhidden");
  });
  $("#thumb3").click(function(){
    $("#WebDesign").toggleClass("hidden unhidden");
  });
</script>

Answer 1

让我们说你要显示和隐藏的div有一个.showable类，而.hidden类隐藏了元素（我不认为你需要隐藏和隐藏的类）：

<script>
$("#thumb1").click(function(){
    $(".showable").addClass("hidden");
    $("#3DModel").removeClass("hidden");

});
$("#thumb2").click(function(){ 
    $(".showable").addClass("hidden");
    $("#DigitalArt").removeClass("hidden");
});
$("#thumb3").click(function(){
    $(".showable").addClass("hidden");
    $("#WebDesign").removeClass("hidden");
});
</script>

在每次点击中，您只需隐藏所有元素，然后显示（通过删除.hidden）您要显示的元素。我想这是你想要在你的伪代码中实现的，但即使我理解不好而且你需要一个不同的解决方案，我认为$ .addClass（）和$ .removeClass（）将为你服务。

Answer 2

每次点击3个按钮时，您都可以调用此javascript函数

function process(id) {
     var divID = "#" + id;

     if($(divID).css("display") === "block")
        $(divID).css("display", "none");
     else
        $(divID).css("display", "block");
}

然后在按钮上指定此onclick =＆＃39;进程（[DivID]）＆＃39; 将[DivID]替换为您要隐藏或取消隐藏的div ID

如何在不使用切换

2 个答案: