Question

我对HTML，CSS和Java尚不陌生，但我正试图建立一个具有讽刺意味的“操作方法”指南，说明和业务流程的网站。

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

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

说实话，我也确实“借用了”一些代码，以便在单击按钮时使其他容器隐藏起来。但这对我不起作用。如果有人能够更有效地隐藏其他容器（例如，当选择容器按钮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>

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

2 个答案: