点击框(电信,石油和天然气和烘焙),我想显示和隐藏div中的内容(动态内容)。
请检查html代码
changeContent:function(){
$('.it-telecom-content').show();
$(document).on('click',".it-telecom",function(){
$('.banking-content , .oil-gas-content').hide();
$('.it-telecom-content').show();
});
$(document).on('click',".banking",function(){
$('.it-telecom-content,.oil-gas-content').hide();
$('.banking-content').show();
});
$(document).on('click',".oil-gas",function(){
$('.it-telecom-content,.banking-content').hide();
$('.oil-gas-content').show();
});
}
here in changeContent function , I have written three click function , **how I can write one generic function to achieve this.**

.industries-section .dynamic-content{
padding: 0 0 40px 0;
/*border-bottom: 2px solid #f8b412;*/
}
.industries-section .oil-gas-content{
display:none;
}
.industries-section .it-telecom-content{
display:none;
}
.industries-section .banking-content{
display:none;
}

<div class="row">
<div class="col-md-4 col-lg-4"> </div>
<div class="col-md-4 col-lg-4"> </div>
<div class="col-md-4 col-lg-4">
<div class="dynamic-content it-telecom-content option animated fadeInRight">
<p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Telecom services</p>
<p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
<a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div class="dynamic-content oil-gas-content option animated fadeInRight">
<p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Oil & Gas services</p>
<p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
<a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
<div class="dynamic-content banking-content option animated fadeInRight">
<p class="subtitle">We enable , encourage and elevate tailor made, recruitment services across various Banking services</p>
<p>we achieve excellence by consistently recruiting right person ar the right time with he highest degree of integrity an self belief</p>
<a href="#">LEARN MORE <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="row below-content">
<div class="col-md-4 col-lg-4">
<div class="it-telecom">
<h1>IT & Telecom</h1>
<p>IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom IT & Telecom </p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="oil-gas">
<h1>Oil & Gas</h1>
<p>Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas Oil & Gas</p>
</div>
</div>
<div class="col-md-4 col-lg-4">
<div class="banking">
<h1>Banking</h1>
<p>Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking Banking</p>
</div>
</div>
</div>
&#13;
如何重构上述代码?如果您需要更多说明,我可以添加一些。
答案 0 :(得分:1)
添加课程active
以确定哪些数据已经显示。然后,添加data-content
属性并使用它的信息存储到div的类中。然后,当您单击一个框(IT,OIL等)时,隐藏活动信息框并显示所点击框的对应信息。
// by default just show the first box
$('.container div:not(.active)').fadeOut(0);
$('.left div').on('click', function() {
// remove active class and hide the box
$('.container div.active').removeClass('active').fadeOut(500);
// extract the clicked box data-content attribute,
// select it and show up
const clazz = $(this).attr('data-content');
window.setTimeout(() => $(`.${clazz}`).addClass('active').fadeIn(500), 250);
});
&#13;
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600);
* {
box-sizing: border-box;
}
body {
display: flex;
}
.left {
align-items: center;
border-right: 2px solid #ddd;
display: flex;
height: 100vh;
justify-content: space-between;
overflow: auto;
padding: 1rem 2rem;
width: 60%;
}
.right {
height: 100vh;
text-align: center;
width: 40%;
}
.left div {
background-color: gold;
color: #444;
cursor: pointer;
font-family: 'open sans';
height: 130px;
line-height: 130px;
text-align: center;
width: 130px;
}
.container {
border: 1px solid #ccc;
height: 200px;
margin: 40px auto;
overflow: hidden;
position: relative;
width: 200px;
}
.container div {
background-color: white;
height: 100%;
left: 0;
padding: 10px;
position: absolute;
top: 0;
width: 100%;
}
p {
color: #444;
font-family: 'open sans';
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="left">
<div class="it-telecom" data-content='it-telecom-content'>
IT & TELECOM
</div>
<div class="oil-gas" data-content='oil-gas-content'>
OIL & GAS
</div>
</section>
<section class="right">
<div class="container">
<div class="it-telecom-content active">
<p>
this is the description for it & telecom
</p>
</div>
<div class="oil-gas-content">
<p>
this is the description for oil & gas
</p>
</div>
</div>
</section>
&#13;