javascript - 单击选择词时添加类
问题描述
我有“选定”类，它的背景颜色为红色，当单击侧边栏中的单词时，我想要将“选定”类赋予同一公司在右侧有这个名称，同时另一家未选择的公司是隐
代码：https ://codepen.io/El7raq/pen/VwWjjgK
我，在仪表板中的意思是这样的，我们选择仅在本部分命名一些我 -> https://drive.google.com/drive/folders/1DzLg26BWmMpMhlQ-lS08UK4r74GTiDut?usp=sharing
HTML
<section class="business-partners">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="col-12 business-partners-header">Business Partners</h2>
</div>
</div>
<div class="row">
<!-- Start slider -->
<div class="col-lg-3 col-md-5 col-sm-12">
<div class="slide">
<h4 class="slid-header">| Partners</h4>
<p id="zoom" class="partners partner-selected"><span>Zoom</span></p>
<p id="jabra" class="partners"><span>Jabra</span></p>
<p id="epos" class="partners"><span>EPOS</span></p>
<p id="dten" class="partners"><span>DTEN</span></p>
<p id="ttec" class="partners"><span>TTec</span></p>
</div>
</div>
<!-- End slider -->
<div class="col-lg-8 col-md-7 col-sm-12">
<div id="zoom" class="partners-content selected">
<h2 class="partners-name"><a href="https://zoom.us/">Zoom</a></h2>
<img class="partners-img" src="../images/business-partners/zoom.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows.
</p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and selves. Our culture of delivering happiness stems from this value.
</p>
</div>
<div id="jabra" class="partners-content">
<h2 class="partners-name"><a href="https://www.mea.jabra.com/about/">Jabra</a></h2>
<img class="partners-img" src="../images/business-partners/jabra_logo.jpg" alt="zoom" srcset="">
<p class="partners-description">
a global brand with a serious passion for sound. Thanks to our expertise in consumer, professional and medical audio technology, our passion is backed up by unrivaled knowledge of the human ear. We’re in the business of helping you hear what you want to hear – from letting the right sound in, to filtering disruptive noise out – but our products are about so much more than that, packed with intuitive features to make life sound better.
</p>
</div>
<div id="epos" class="partners-content">
<h2 class="partners-name"><a href="https://www.eposaudio.com/">EPOS</a></h2>
<img class="partners-img" src="../images/business-partners/EPOS_Logo_-_Black_-_Large.jpg" alt="zoom" srcset="">
<p class="partners-description">
EPOS delivers high-end audio solutions designed for enterprise and gaming. Based on pioneering audio technology, EPOS strives to unleash human potential by perfecting audio experiences and delivering innovative design and performance with all of our audio solutions. <p>
Zoom’s value is to care. We care for our customers, employees, company, community, and selves. Our culture of delivering happiness stems from this value.
</p>
<p>
EPOS headquarters is located in Copenhagen, Denmark, and is a key hub for our business. EPOS builds on more than 115 years of experience in audio innovation. We operate in a global market with offices and partners in more than 60 countries.
</p>
<p>
EPOS Name is derived from Latin and ancient Greek and is used to describe epic stories, speech, and poetry. The name encapsulates our dedication to creating solutions that enable ways of communication through the Power of Audio. </p>
<p>
EPOS is part of the Demant group – a world-leading audio and hearing technology group that offers solutions and services to help people connect and communicate with the world around them. The Demant Group operates in a global market with companies in more than 30 countries, employs more than 16,000 employees, and generates annual revenue of DKK 14.5 billion.
</p>
</div>
<div id="dten" class="partners-content">
<h2 class="partners-name"><a href="https://eu.dten.com/gb">DTEN</a></h2>
<img class="partners-img" src="../images/business-partners/DIC_i_Yi_400x400.jpg" alt="zoom" srcset="">
<p class="partners-description">
DTEN builds innovative communications technology creating the ideal environment to communicate and collaborate.
</p>
<p>
DTN develops award-winning collaboration solutions that combine all-in-one cutting- edge features, plug-and-play ease, high quality performance and affordability.
</p>
<p>
DTEN's Zoom certified appliances and integrated service subscriptions revolutionize the way teams around the world connect, communicate and collaborate.
</p>
<p>
Founded in 2015, DTEN is rapidly becoming a recognized international leader for innovation and accessibility in communication.
</p>
<h4>
DTEN D7
Wins 2019 Red Dot Best Of The Best Award
</h4>
<p>
DTEN is a 2019 recipient of the prestigious Red Dot: Best of the Best Award for D7. The Red Dot Award recognizes D7 for innovative product design, including breakthrough technology, inherent functionality and streamlined aesthetics.
</p>
</div>
<div id="ttec" class="partners-content">
<h2 class="partners-name"><a href="https://www.hellottec.com/">TTec</a></h2>
<img class="partners-img" src="../images/business-partners/ttec.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows. </p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
</div>
</div>
</div>
</section>
CSS
.business-partners-body{
position: relative;
}
.business-partners-body .top-svg{
position: absolute;
z-index: -1;
width: 100%;
top: 40px;
}
.business-partners {
margin-top: 100px;
margin-bottom: 100px;
}
.business-partners .business-partners-header {
margin-bottom: 50px;
font-size: 45px;
}
.business-partners .business-partners-header:after {
background-color: #000;
content: "";
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 40px;
}
.business-partners .business-partners-header:after {
left: 0.5em;
margin-right: -50%;
}
/*Partners slider*/
.slide {
border: 2px solid #000;
min-height: 445px;
border-radius: 15px;
}
.slide .slid-header {
padding: 20px;
border-bottom: 2px solid #000;
}
.slide .partners {
padding: 15px 10px 10px 15px;
margin: 0;
font-size: 18px;
}
.slide .partner-selected {
color: var(--primary-color);
}
.slide .partners span:hover {
color: var(--hover-color)
}
/* Partners content*/
.partners-content {
margin-left: 80px;
/* display: none; */
}
.partners-content .partners-name {
margin-bottom: 30px;
}
.partners-content .partners-img{
width: 100%;
height: 300px;
margin-bottom: 50px;
}
.selected {
display:block;
background-color: red;
}
谢谢您的帮助
解决方案
您可以尝试使用以下代码：
$(document).ready(function(){
$('.partners').click(function(){
$('.partners').removeClass('partner-selected');
$('.partners-content').removeClass('selected');
$(this).addClass('partner-selected');
var side_id = $(this).attr('id');
$('partners-content').hide();
if($('div#' + side_id).hasClass('partners-content')){
$("div#" + side_id).addClass("selected");
$("div#" + side_id).show();
}
});
});.business-partners-body{
position: relative;
}
.business-partners-body .top-svg{
position: absolute;
z-index: -1;
width: 100%;
top: 40px;
}
.business-partners {
margin-top: 100px;
margin-bottom: 100px;
}
.business-partners .business-partners-header {
margin-bottom: 50px;
font-size: 45px;
}
.business-partners .business-partners-header:after {
background-color: #000;
content: "";
display: inline-block;
height: 4px;
position: relative;
vertical-align: middle;
width: 40px;
}
.business-partners .business-partners-header:after {
left: 0.5em;
margin-right: -50%;
}
/*Partners slider*/
.slide {
border: 2px solid #000;
min-height: 445px;
border-radius: 15px;
}
.slide .slid-header {
padding: 20px;
border-bottom: 2px solid #000;
}
.slide .partners {
padding: 15px 10px 10px 15px;
margin: 0;
font-size: 18px;
}
.slide .partner-selected {
color: var(--primary-color);
}
.slide .partners span:hover {
color: var(--hover-color)
}
/* Partners content*/
.partners-content {
margin-left: 80px;
/* display: none; */
}
.partners-content .partners-name {
margin-bottom: 30px;
}
.partners-content .partners-img{
width: 100%;
height: 300px;
margin-bottom: 50px;
}
.partners-content{
display:none;
}
.selected {
display:block;
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<section class="business-partners">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="col-12 business-partners-header">Business Partners</h2>
</div>
</div>
<div class="row">
<!-- Start slider -->
<div class="col-lg-3 col-md-5 col-sm-12">
<div class="slide">
<h4 class="slid-header">| Partners</h4>
<p id="zoom" class="partners partner-selected"><span>Zoom</span></p>
<p id="jabra" class="partners"><span>Jabra</span></p>
<p id="epos" class="partners"><span>EPOS</span></p>
<p id="dten" class="partners"><span>DTEN</span></p>
<p id="ttec" class="partners"><span>TTec</span></p>
</div>
</div>
<!-- End slider -->
<div class="col-lg-8 col-md-7 col-sm-12">
<div id="zoom" class="partners-content selected">
<h2 class="partners-name"><a href="https://zoom.us/">Zoom</a></h2>
<img class="partners-img" src="../images/business-partners/zoom.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows.
</p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
<div id="jabra" class="partners-content">
<h2 class="partners-name"><a href="https://www.mea.jabra.com/about/">Jabra</a></h2>
<img class="partners-img" src="../images/business-partners/jabra_logo.jpg" alt="zoom" srcset="">
<p class="partners-description">
a global brand with a serious passion for sound. Thanks to our expertise in consumer, professional and medical audio technology, our passion is backed up by unrivaled knowledge of the human ear. We’re in the business of helping you hear what you want to hear – from letting the right sound in, to filtering disruptive noise out – but our products are about so much more than that, packed with intuitive features to make life sound better.
</p>
</div>
<div id="epos" class="partners-content">
<h2 class="partners-name"><a href="https://www.eposaudio.com/">EPOS</a></h2>
<img class="partners-img" src="../images/business-partners/EPOS_Logo_-_Black_-_Large.jpg" alt="zoom" srcset="">
<p class="partners-description">
EPOS delivers high-end audio solutions designed for enterprise and gaming. Based on pioneering audio technology, EPOS strive to unleash human potential by perfecting audio experiences and delivering innovative design and performance with all of our audio solutions. <p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
<p>
EPOS headquarters is located in Copenhagen, Denmark, and is a key hub for our business. EPOS builds on more than 115 years of experience in audio innovation. We operate in a global market with offices and partners in more than 60 countries.
</p>
<p>
EPOS Name is derived from Latin and ancient Greek and is used to describe epic stories, speech and poetry. The name encapsulates our dedication to create solutions that enable ways of communication through the Power of Audio. </p>
<p>
EPOS is part of the Demant group – a world-leading audio and hearing technology group that offers solutions and services to help people connect and communicate with the world around them. The Demant Group operates in a global market with companies in more
than 30 countries, employs more than 16,000 employees and generates an annual revenue of DKK 14.5 billion.
</p>
</div>
<div id="dten" class="partners-content">
<h2 class="partners-name"><a href="https://eu.dten.com/gb">DTEN</a></h2>
<img class="partners-img" src="../images/business-partners/DIC_i_Yi_400x400.jpg" alt="zoom" srcset="">
<p class="partners-description">
DTEN builds innovative communications technology creating the ideal environment to communicate and collaborate.
</p>
<p>
DTEN develops award-winning collaboration solutions that combine all-in-one cutting- edge features, plug-and-play ease, high quality performance and affordability.
</p>
<p>
DTEN's Zoom certified appliances and integrated service subscriptions revolutionize the way teams around the world connect, communicate and collaborate.
</p>
<p>
Founded in 2015, DTEN is rapidly becoming a recognized international leader for innovation and accessibility in communication.
</p>
<h4>
DTEN D7
Wins 2019 Red Dot Best Of The Best Award
</h4>
<p>
DTEN is a 2019 recipient of the prestigious Red Dot: Best of the Best Award for D7. The Red Dot Award recognizes D7 for innovative product design, including breakthrough technology, inherent functionality and streamlined aesthetics.
</p>
</div>
<div id="ttec" class="partners-content">
<h2 class="partners-name"><a href="https://www.hellottec.com/">TTec</a></h2>
<img class="partners-img" src="../images/business-partners/ttec.jpg" alt="zoom" srcset="">
<p class="partners-description">
Zoom Video Communications, Inc. brings teams together to get more done in a frictionless video environment. easy, reliable, and innovative video-first unified communications platform provides video meetings, voice, webinars, and chat across desktops, phones, mobile devices, and conference room systems. Zoom helps enterprises create elevated experiences with leading business app integrations and developer tools to create customized workflows. </p>
<p>
Zoom’s value is to care. We care for our customers, employees, company, community, and
selves. Our culture of delivering happiness stems from this value.
</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>推荐阅读
- python - 从网站提取数据时如何绕过验证码。我从 https://jp.indeed.com/ 中提取
- sensors - ESP32 模数 ADC
- html - 将鼠标悬停在我的卡片上并不能覆盖完整的卡片
- java - 如何在 DynamoDB 中使用包含函数和 DynamoDBMapper Java？
- ios - 无法将字符串转换为 NSDate Swift
- sql - sql查询不包括当前日期的数据
- python - Python 的海龟模块 - 我如何让海龟根据它下面的标记颜色做一个动作？
- python - 如何使用 for 循环将不同的变量分配给类对象？
- javascript - 如何在 nodejs 上使用 imap-simple 和 mailparser 按发件人过滤邮件？
- android - 为什么android studio模拟器不起作用？