Как использовать кнопки, чтобы показать / скрыть контейнеры

Question

Я довольно новичок в HTML, CSS и Javascript и пытаюсь создать сайт с ироническими инструкциями и инструкциями «Как», а также бизнес-процессами.

Идея состоит в том, что у меня есть контейнер на стороне, который действует как «меню» с кнопками в нем, чтобы выбрать нужное руководство.

После нажатия кнопки контейнер справа изменится. Эти контейнеры справа будут местом, где размещены учебные материалы, но сейчас я выделил всем контейнерам другой цвет, чтобы я мог определить, когда он изменился. Я бы хотел, чтобы функции кнопок работали, прежде чем я начну добавлять все в контейнеры. Я изо всех сил пытаюсь заставить код работать, поэтому контейнеры фактически меняются! Я создал J-Fiddle, который, надеюсь, покажет то, что я пробовал до сих пор ..

Честно говоря, я также «позаимствовал» некоторый код, позволяющий скрыть другие контейнеры при нажатии кнопки, но у меня это не работает. Если у кого-то есть более эффективный способ скрыть другие контейнеры (например, контейнеры 1, 2 и 3 скрыты, когда выбрана кнопка 4 контейнера), то сделайте это! Любая помощь очень ценится.

   <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

Вот рабочий код.В случае, если вам нужно сослаться на это.

$(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>

Answer 2

Хорошо, сначала несколько заметок:

1) В скрипте вы должны поместить свой javascript в нижнее левое окно, верхнее левое окно только для html, незначительное, просто выбрасывая его как подсказку.

2) На вашей скрипке не загружен jquery, вы можете управлять внешними ресурсами в левом меню, сейчас ваш $ не определен в скрипте

А по вашей проблеме этот селектор неправильный

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

этот селектор правильный

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

Ваш оригинальный селектор нацелен на любой div с идентификатором "div" что-то, где вы называете их по-разному. Попробуйте и дайте мне знать