我尝试着研究这个主题，围绕着这个问题有很多，但是我找不到适合我想要的解决方案。
我想做什么：
我在左侧有一个列表菜单，而在左侧是divs内容区域。在他们的顶部，我还有一个“标题”，上面写着所选内容的名称。
我希望在单击其中一个元素时显示具有所选内容的DIV，并且还要更改相同内容的标题名称。
我希望FAQ div / content默认为selectect
PS：单击链接时，我希望左侧的列表元素样式不同，背景，颜色改变，我应该使用：active元素还是focus？以及如何将其集成到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>
答案 0 :(得分：0)
由于我没有足够的代表，所以我无法发表评论，但是我只是在这里留下一个大概的主意作为我的答案
首先，您应该找到一种方法来捆绑构成整个布局的这3个不同的部分，因此在您的情况下，左侧的链接为标题，内容。
想法：向这些元素data-id="faq"中添加一个属性，这样您就知道此链接标题内容均属于常见问题ID。
一旦确定了哪个内容/标题属于哪个链接，您唯一需要做的就是监听clickEvent，抓住被点击元素的data-id，使用该ID查找两个标题以及属于该ID的内容并显示出来，请确保隐藏其余内容。