javascript - グループ内の特定の div を表示/非表示にする Javascript

Question

要素の表示を切り替えるスクリプトを広範囲に検索しましたが、次の作業を適切に行うスクリプトが見つかりません。

私のウェブページには、たとえばコンテンツのいくつかのセクションがあります..

    <div id="section1">
        <div id="section1a" class="section1links"></div>
        <div id="section1b" class="section1links hide"></div>
        <div id="section1c" class="section1links hide"></div>
    </div>

    <div id="section2">
        <div id="section2a" class="section2links"></div>
        <div id="section2b" class="section1links hide"></div>
        <div id="section2c" class="section1links hide"></div>
    </div>

デフォルトでは、セクションの最初の div が表示されるため、クラス名と I には次の CSS があります。

    .hide {
        display: none;
    }

たとえば、「section1b」を表示するリンクがあります。

    <a href="#" onclick="show('section1links','section1b')">show section 1b</a>

この例では、最初にクラス「section1links」を持つすべての要素から「非表示」クラス名を削除し、次に「section1b」を除くすべての要素に追加する JavaScript 関数が必要です。

簡単に言えば：

    function show(group, sectiontoshow)
    {
        get elements with class name 'group'
        remove any instances of class name 'hide' wherever present

        add class name 'hide' to all elements with class name 'group', except the one with id 'sectiontoshow'.
    }

また、リンクをクリックしたときに Web ページがトップに戻ってはいけません。通常、リンクではハッシュタグではなく「javascript:void(0)」を使用しますが、競合が発生するかどうかはわかりません。

より資格のある JS プログラマーの方がより良い解決策を持っている可能性があり、これは非常に時間のかかる作業だと思うかもしれません。