如何使用按钮显示/隐藏容器

Question

我是HTML，CSS和Javascript的新手，我正在尝试建立一个网站，具有讽刺意味的是，“如何”指南和说明以及业务流程。

我的想法是，我在侧面有一个容器，它作为一个“菜单”，里面有按钮，可以选择他们想要的指南。

单击按钮后，右侧的容器将更改。 右侧的这些容器将是放置培训材料的空间，但是现在，我已经为所有容器提供了不同的颜色，以便我可以知道它何时发生了变化。 在开始将所有内容添加到容器之前，我希望按钮功能正常工作。 我正在努力让代码工作，所以容器实际上改变了！ 我创造了一个J-Fiddle，希望能展示到目前为止我尝试过的东西......

老实说，当点击一个按钮时，我也“借”了一些关于将其他容器带到.hide的代码，但它对我不起作用。 如果有人有更有效的方法来隐藏其他容器（例如，当选择容器按钮4时隐藏容器1,2和3），那就去吧！ 任何帮助都非常感谢。

   <div class="centrepositioning">

            <div class="howToLeftList">
<button id="showpanel1">Centre White Panel</button>
<button id="showpanel2">Centre Red Panel</button>
<button id="showpanel3">Centre Blue Panel</button>
<button id="showpanel4">Centre Yellow Panel</button>
</div>



    <div id="centrePanel"></div>
    <div id="centrePanel2"></div>
    <div id="centrePanel3"></div>
    <div id="centrePanel4"></div>



<script type="text/javascript">
 </script>

<script>
$(function() {
    $('#showpanel1').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel1').show();
    });
    $('#showpanel2').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel2').show();
    });

    $('#showpanel3').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel3').show();
    });

    $('#showpanel4').click(function() {
        $('div[id^=div]').hide();
        $('#centrePanel4').show();
    });

})</script>

.centrepositioning
{
    border:thin blue solid;
    margin:auto;
    padding:10px;
    width:1337px;
    }
.howToLeftList
    {
    width:250px;
    height:300px;
    background-color:#004FB6;
    padding:10px;
    color:white;
    float:left;
    margin:5px;
}
#centrePanel
{
    width:1000px;
    background-color:white;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;

}
#centrePanel2
{
    width:1000px;
    background-color:red;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

}
#centrePanel3
{
    width:1000px;
    background-color:blue;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

}
#centrePanel4
{
    width:1000px;
    background-color:yellow;
    height:2000px;
    float:left;
    border:thin red solid;
    margin:5px;
    padding:10px;
    display:none;

的jsfiddle

Answer 1

好的一些注意事项：

1）在小提琴中，你应该将你的javascript放在左下方的窗口，左上方的窗口仅用于html，轻微，只是将它作为提示抛出。

2）您的小提琴没有加载jquery，您可以在左侧菜单上管理外部资源，现在您的$在小提琴中未定义

关于你的问题，这个选择器是错误的

$('div[id^=div]').hide();

这个选择器是正确的

$('div[id^=centrePanel]').hide();

您的原始选择器定位任何ID为“div”的div，您可以使用不同的名称命名它们。 试一试，让我知道

Answer 2

这是一个有效的代码。 如果您需要参考它。

 $(function() { $('#showpanel1').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel1').show(); }); $('#showpanel2').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel2').show(); }); $('#showpanel3').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel3').show(); }); $('#showpanel4').click(function() { $('div[id^=centrePanel]').hide(); $('#centrePanel4').show(); }); }) 

 .centrepositioning { border:thin blue solid; margin:auto; padding:10px; } .howToLeftList { width:250px; height:300px; background-color:#004FB6; padding:10px; color:white; float:left; margin:5px; } #centrePanel1 { width:1000px; background-color:white; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; } #centrePanel2 { width:1000px; background-color:red; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } #centrePanel3 { width:1000px; background-color:blue; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } #centrePanel4 { width:1000px; background-color:yellow; height:2000px; float:left; border:thin red solid; margin:5px; padding:10px; display:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="centrepositioning"> <div class="howToLeftList"> <button id="showpanel1">Centre White Panel</button> <button id="showpanel2">Centre Red Panel</button> <button id="showpanel3">Centre Blue Panel</button> <button id="showpanel4">Centre Yellow Panel</button> </div> <div id="centrePanel1">white</div> <div id="centrePanel2">red</div> <div id="centrePanel3">blue</div> <div id="centrePanel4">yellow</div>