javascript - 如果父级上存在类,则获取子级 div 内容
问题描述
我有一个模块,在悬停时,我希望更改右侧的内容(下面演示中蓝色 div 中的内容)。
为了实现这一点,我想做的是:
- 如果 .active 类在 then 上存在,
li.tabs
则从中获取.content
并显示在.overview
div 中。
.content
但不确定当课程.active
存在时我如何获得.overview
?
我有以下标记(简化):
// 1. Check if li has class active
if ($('li.tabs').hasClass('active')) {
// 2. get .content div from li where class .active exists
}
.tabs{
border: 1px solid yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<script type='text/javascript' src='https://code.jquery.com/jquery-3.4.1.min.js?ver=3.4.1'></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="list">
<li class="tabs active">
<div class="header"><span>Header</span></div>
<div class="content d-none"><p>content</p></div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none"><p>content 2</p></div>
</li>
</div>
<div class="overview"> </div>
</div>
解决方案
您的完整代码以及活动类切换:
var overview = $('.overview');
$('.tabs').each(function(i) {
var thisTab = $(this);
var thisContent = thisTab.find('.content').html();
thisTab.on('mouseenter', function(e) {
thisTab.addClass('active');
overview.html(thisContent);
}).on('mouseleave', function(e) {
thisTab.removeClass('active');
overview.html('');
});
});
.tabs {
border: 1px solid yellow;
}
.tabs.active {
background: none yellow;
}
.list {
border: 1px solid red;
flex-basis: 40%;
}
.list li {
list-style-type: none;
}
.overview {
border: 1px solid blue;
-ms-flex-preferred-size: 60%;
flex-basis: 60%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex flex-row">
<div class="list">
<li class="tabs">
<div class="header"><span>Header</span></div>
<div class="content d-none">
<p>Content 1</p>
</div>
</li>
<li class="tabs">
<div class="header"><span>Header 2</span></div>
<div class="content d-none">
<p>Content 2</p>
</div>
</li>
</div>
<div class="overview"> </div>
</div>
同样在JSFiddle
推荐阅读
- python - python subplot plot.bar from one dataframe and legend from a different dataframe
- haskell - 约束不足的类型参数是否等同于值级别的强制转换?
- oracle - 在 where 子句中使用 case 语句时,Oracle 存储过程不使用索引
- sql-server - ASE SYBASE/SQL SERVER 中的簇索引
- docker - 使用纯文本时出现 kafka-connect SSL 错误
- javascript - HTML 表单无法正确提交
- docker - 在 Docker 中运行时 SMTP 断开连接
- mysql - SQL relational database for tracking sales throughout a year
- vb.net - 需要编写一个程序,将 URL 剥离为协议和域
- javascript - 从客户端隐藏 HTML