如何在不使用开关的情况下在Bootstrap中隐藏/取消隐藏

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

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

这只是psudo代码，但是这是多了还是少了什么我想：

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>

来源

2016-09-18 Sir.Lich

也有jQuery的方法.hide（）和.show（） –

比方说，你想显示div的隐藏有一个.showable类，隐藏的类隐藏元素（我不认为你需要同时隐藏和未隐藏的类）：

<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（）将为你服务。

来源

2016-09-18 09:44:06 Sergeon

工程就像一个魅力，谢谢你。 –

你可以调用这个javascript函数，每次3个按钮是点击

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

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

然后在按键分配此的onclick = '过程（[DIVID]）' 与DIV ID替换[DIVID]你希望隐藏或取消隐藏

来源

2016-09-19 09:52:01 mondyang

如何在不使用开关的情况下在Bootstrap中隐藏/取消隐藏

回答

相关问题