jQuery的切换/隐藏问题

我继续，最小化了我的许多HTML代码，这样你可以更容易地看到事情，是的，它需要清理

HTML代码：

    <!-- LEFT COLUMN -->
<div class="column1" style="flex-grow: 1 !important;">
    <!-- APPRENTICE LIST -->
    <div onclick="console.log('clicked')" id="button" class="test1">
        <P>header junk</P>
    </div>
    <table id="table">
        <p>table junk</p>
    </table>

    <!-- JOURNEYMAN LIST -->
    <div onclick="console.log('clicked')" id="button1" class="test1">
        <P>header junk</P>
    </div>
    <table id="table1">
        <p>table junk</p>
    </table>

    <!-- EXPERT LIST -->
    <div onclick="console.log('clicked')" id="button2" class="test1">
        <P>header junk</P>
    </div>
    <table id="table2">
        <p>table junk</p>
    </table>

    <!-- ARTISAN LIST -->
    <div onclick="console.log('button3')" id="button3" class="test1">
        <P>header junk</P>
    </div>
    <table id="table3">
        <p>table junk</p>
    </table>
</div>

<!-- Middle Column -->
<div class="column1" style="flex-grow: 2 !important;">
    <!-- APPRENTICE GUIDE -->
    <div class="imagebox" id="box">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- JOURNEYMAN GUIDE -->
    <div class="imagebox" id="box1">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- EXPERT GUIDE -->
    <div class="imagebox" id="box2">
        <p>header junk</p>
        <div class="box3">
            <table class="test3">
                <p>table junk</p>
            </table>
        </div>
    </div>
    <!-- ARTISAN GUIDE -->
    <div class="imagebox" id="box4">

        <div class="box3">
            <table class="test3">
                <p>table junk</p>
        </div>
        </table>
    </div>
</div>
</div>
</div>

<!-- THINGS TO KNOW APPRENTICE -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox" id="box">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW JOURNEYMAN -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk1">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW EXPERT -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk2">
    <div class="body-flexstart">
        <div class="column1">
            <div class="imagebox" id="box">
                <p>header junk</p>
                <div class="thingstoknowbox">
                    <p class="professionheader4">TRAINER LOCATIONS</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- THINGS TO KNOW ARTISAN -->
<div class="column1" style="flex-grow: 1 !important;" id="ttk3">
        <div class="body-flexstart">
            <div class="column1">
                <div class="imagebox" id="box">
                    <p>header junk</p>
                    <div class="thingstoknowbox">
                        <p class="professionheader4">TRAINER LOCATIONS</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

基本上，没有发布CSS，它是一行，下面有信息

|LEFT COLUMN|  |MIDDLE COLUMN|  |THINGS TO KNOW| 

页面加载时，学徒|左栏| | |中栏| |要知道的事情|已切换

每次按下按钮都应切换新窗口/隐藏每列下的旧窗口。“熟练工”按钮工作正常，但我似乎无法将其应用于所有其他方面

我见过jQuery代码短得多，我想看看你们是如何做到这一点的。

而不是使用

$（“#id”）.hide（）

并对所有if类使用它，为它们分配一个类，然后像这样隐藏：

$（“.class”）.hide（）

是的，在设计样式时使用类是一件好事。它有助于大幅精简代码，使用类在将来肯定会对您有所帮助

要分配类，请使用
class=“class class2 class3”
，其中空格将它们定义为单独的类
 需要检查的工作代码实际上属于代码检查堆栈交换。为它们放置相同的类值，然后通过执行
$（.class）.hide（）
同时隐藏它们。如果这是您正在寻找的，那么我将把它作为解决方案放在这里，一旦我可以访问我的计算机，我将帮助您。同意@DaveNewton，这里发生了很多事情。整合您的html以利用类，看起来您所做的大部分工作都是在单击时隐藏内容，这可以简单地完成。另外，您不需要所有这些
（document）.ready（）
函数，它只是无关的，只需使用其中一个即可。
|LEFT COLUMN|  |MIDDLE COLUMN|  |THINGS TO KNOW|