<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获得其他元素元素文本信息 xinbiancheng.cn</title>
<style>
.type_li,
p {
border: 1px solid red;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<ul class="mode">
<li class="mode_li">
<p>white</p>
</li>
<li class="mode_li">
<p>black</p>
</li>
<li class="mode_li active">
<p>red</p>
</li>
</ul>
<ul class="type">
<li class="type_li">type1</li>
<li class="type_li active">type2</li>
<li class="type_li">type3</li>
</ul>
</body>
<script>
// 点击mode_li 获取 .type_li.active
mls = document.querySelectorAll('.mode_li')
for (var i = 0; i < mls.length; i++) {
mls[i].onclick = function () {
ta = document.querySelector('.type_li.active')
alert(ta.innerText)
}
}
// type_li 获取 .mode_li.active
tls = document.querySelectorAll('.type_li')
for (var i = 0; i < tls.length; i++) {
tls[i].onclick = function () {
mp = document.querySelector('.mode_li.active p')
alert(mp.innerText)
}
}
</script>
</html>