单击右侧显示内容的链接列表带有标题

Question

我试图研究这个主题，有很多问题，但我找不到适合我想做的解决方案。

我想做的事：

我在左侧有一个列表菜单，在左侧有一个 divs 内容区域。我还在它们顶部有一个“标题”，上面写着所选内容的名称。

我希望当单击其中一个元素时，它会显示带有所选内容的 DIV，并且还希望将标题的名称更改为相同的内容。

我希望FAQ div/content 默认是selectect

PS：单击链接时，我希望左侧的列表元素样式不同，背景，颜色改变，我应该使用 :active 元素还是焦点？以及如何将其集成到 js/jquery 中以跟进？

面临的问题：

我已经把一些 JS/Jquery 放在了论坛的工作服上，但它似乎不能正常工作。

编辑：

我已经尝试了以下代码。 标题和内容完美同步，但由于我在左侧为链接列表放置了一个切换功能，因此切换功能无法启动。 欢迎任何帮助或优化此代码的方法，感谢您的时间！ https://jsfiddle.net/Sadhill94/6ax4ym39/2/

感谢大家即将到来的支持，祝您有美好的一天！

<script>


  var acc = document.getElementsByClassName("accordion");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
     $(document).ready(function() {  

      $(".copen").click(function() {

         $(".c").hide();

         var cid = $(this).data("c");
         $("#"+cid).show();   

      });

   });



    $(document).ready(function() {  

      $(".copen").click(function() {

         $(".d").hide();

         var kuk = $(this).data("d");
         $("#"+kuk).show();   
     });

   });

function toggleStyle(lu){
        var stylish= document.getElementById('menuList').children;
        for(var i = 0; i<stylish.length;i++){
            stylish[i].className ="inactiveStyle";

        }

        lu.className="activeStyle";
    }
</script>
<style>
*{
box-sizing:border-box;
    margin:0;
    padding:0;
    overflow-wrap: break-word; 
}

#container{
    width:100%;
      } 

#box{
    width:100%;
    box-sizing: border-box;
    padding-left:3%;
    padding-right:3%;
    padding-top:3%;
}

    .topOfThePage{
        visibility: hidden;
    }

.divSize{
    display:inline-block;
    vertical-align: top;
    text-align:center;
}

.leftAlign{
    width:20%;
}

.rightAlign{
    width:80%
}

/*.activeStyle{
           color:#fff;
    transition: 0.4s;
    background-color:#0f2c41;
    transition: 0.4s;
    }*/

    .inactiveStyle{
    border:2px solid #0f2c41;
    color:#0f2c41;
    padding: 1em;
    margin-bottom:10%;
    width:100%;
    border-radius:5px;
    cursor:pointer;
    list-style: none;
        font-weight:500;
        font-size:1.1em;
        transition:0.4s;
    }

    .activeStyle{
        color:#fff;
        background-color:#0f2c41;
            border:2px solid #0f2c41;
    padding: 1em;
    margin-bottom:10%;
    width:100%;
    border-radius:5px;
    cursor:pointer;
    list-style: none;
        font-weight:500;
        font-size:1.1em;
        transition:0.4s; 
    }


.row{
    display:inline;
}

.hideContent{
    display:none;
}

.leftAlign{
    display:inline-block;
}

.headerPres{
    display:inherit;
    width:inherit;
     padding-bottom:13%;
    color:#fff;
}
.h2Content{
    margin:auto;
    letter-spacing:2px;
    text-transform: uppercase;
    color:#fff;
    font-size:7em;
    padding-bottom:2%;
    padding-top:5%;
}

.pContent{
    padding-bottom:0%;
    padding-top:2%;
    font-size:1.5em;
}

.flag {
    width: 100%; 
    margin: 0 auto;
    position: relative; 
    background: #0f2c41;
    color: white;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-align: center;
    -webkit-box-shadow: 0px 9px 16px -6px rgba(0,0,0,0.9);
    -moz-box-shadow: 0px 9px 16px -6px rgba(0,0,0,0.9);
    box-shadow: 0px 9px 16px -6px rgba(0,0,0,0.9);
    margin-bottom:3%;
    border:1px solid transparent; 
    padding-bottom:5%;
}

.goTop{
    text-decoration:none;
}

/* FAQ CONTENT */
.accordion {
    background-color: #fff;
    color: #0f2c41;
    cursor: pointer;
    width: 100%;
    border-radius:5px;
    text-align: center;
    outline: none;
    font-size: 0.9em;
    transition: 0.4s;
    font-family:Roboto;
    font-weight:500;
    width:40%;
    padding:1.5rem;
    margin-bottom:2%;
    letter-spacing:2px;
    font-weight:600;
    border:1px solid #fff;
    box-shadow: 0px 1px 4px 0px rgba(150,150,150);
    -moz-box-shadow: 0px 1px 4px 0px rgba(150,150,150);
    -webkit-box-shadow: 0px 1px 4px 0px rgba(150,150,150);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#969696')";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#969696');
}

.active, .accordion:hover {
    background-color: #0f2c41;
    color:#fff;
    border:1px solid #0f2c41;
     -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);
    box-shadow: 0px 0px 0px  rgba(0,0,0,0.0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, rgba(0,0,0,0.0)";
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=180, rgba(0,0,0,0.0));
    border-radius:5px;

}

.panel {
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width:inherit;
    display:inherit;
    padding-left:7%;
    padding-right:7%;
    margin:0 auto;
}

.panelP{
    text-align:justify;
    margin-bottom:6%;
    margin-top:1%;
    word-break:break-word;
    line-height: 1.7em;

}


.sizingCapt{
   padding-left:5%;
    padding-right:5%;
    display:inherit;
    vertical-align: inherit;
    margin:0 auto;

}

/* SHOW AND HIDE CONTENT DIV CLASS*/

.menuPage{
    width:inherit;
    display: inherit;
}

.showContent{
    width:inherit;
    display:inherit;
}

#menuDivs{
    display:inherit;
}

    <div id="container">
        <a id="topOfThePage"><div id="menuDivs">
               <a class="topPage" type="hidden">
                <div id="d1" class="pageTitle flag d ">
<h2 class="h2Content">F.A.Q</h2>
<p class="pContent ">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
           </a>

       <a class="topPage" type="hidden">
           <div id="d2" class="pageTitle flag d "style="display:none"><h2 class="h2Content">Termms & Conditions</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
           </div>
       </a>       
        <a class="topPage">
            <div id="d3" class=" pageTitle flag d " style="display:none"><h2 class="h2Content">Delivery & Returns</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
        </a>
              <a class="topPage">
            <div id="d4" class=" pageTitle flag d " style="display:none"><h2 class="h2Content">Privacy Policy</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
        </a>
              <a class="topPage">
            <div id="d5" class=" pageTitle flag d " style="display:none"><h2 class="h2Content">Size Guide</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
        </a>
              <a class="topPage">
            <div id="d6" class=" pageTitle flag d " style="display:none"><h2 class="h2Content">Copyright</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
        </a>
              <a class="topPage">
            <div id="d7" class=" pageTitle flag d " style="display:none"><h2 class="h2Content">Credits</h2>
                <p class="pContent">Here you can find the frequently asked questions. We help you find an answer</p>
            </div>
        </a>

    </div>
</a>

<div id="box">  
    <div class="leftAlign divSize">
        <div class="row">
            <div class="menuPage">
            <ul id="menuList">
 <a class="goTop" href="#" ><li class="activeStyle copen" data-c="c1" data-d="d1" onclick="toggleStyle();">F.A.Q</li></a>      
                        <a class="goTop" href="#" onclick="toggleStyle(this);return fasle;"><li class="copen inactiveStyle" data-c="c2" data-d="d2" >Terms & Conditions</li></a>
                        <a class="goTop" href="#" onclick="toggleStyle(this); return false;"><li class="copen inactiveStyle" data-c="c3" data-d="d3">Delivery & Returns</li></a>       
                        <a class="goTop" href="#" onclick="toggleStyle(this); return false;"><li class="copen inactiveStyle" data-c="c4" data-d="d4" onclick="toggleStyle(this);">Privacy Policy</li></a>
                        <a class="goTop" href="#" onclick="toggleStyle(this); return false;"><li class="copen inactiveStyle" data-c="c5"data-d="d5" onclick="toggleStyle(this);">Size Guide</li></a>
                        <a class="goTop" href="#" onclick="toggleStyle(this); return false;"><li class="copen inactiveStyle" data-c="c6"data-d="d6" onclick="toggleStyle(this);">Copyright</li></a>
                        <a class="goTop" href="#" onclick="toggleStyle(this); return false;"><li class="copen inactiveStyle" data-c="c7"data-d="d7" onclick="toggleStyle(this);">Credits</li></a>


                    </ul>
            </div>
        </div>
    </div><div class="rightAlign divSize">
            <div class="sizingCapt">
               <div id="c1" class="c">
                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>

                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>

                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>

                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>


                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>



                    <button class="accordion">Lorem ipsum dolor sit amet</button>
                        <div class="panel">
                            <p class="panelP">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
                        </div>

                </div>

           <div id="c2" class="c" style="display:none"> 
              <p>Cpmtemt 2</p>
            </div>
            <div id="c3" class="c" style="display:none"> 
                <p>Content 3</p>
            </div>
            <div id="c4" class="c" style="display:none"> 
                <p>Content 4</p>      
            </div>
            <div id="c5" class="c" style="display:none"> 
                <p>Content 5</p>
            </div>
            <div id="c6" class="c" style="display:none"> 
                <p>Content 6</p>
            </div>
            <div id="c7" class="c" style="display:none"> 
                <p>Content 7</p>       
            </div>

Answer 1

我无法发表评论，因为我还没有足够的代表，但我只是在这里留下一个粗略的想法作为我的答案

首先，您应该找到一种方法将构成整个布局的这 3 个不同部分联系起来，因此在您的情况下，链接位于左侧、标题和内容。

想法：给这些元素中的每一个添加一个属性data-id="faq" 这样你就知道这个链接头内容都属于faq ID。

一旦您确定了哪个内容/标题属于哪个链接，您只需监听 clickEvents，获取被点击元素的data-id，使用该 ID 查找标题和内容属于该 ID 并显示它们，请确保隐藏其余内容。