<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style>
.active {
color: #f60;
}
.article-column-content {
display: none;
}
.contentActive {
display: block;
}
</style>
<body>
<div>
<a href="#1">1111</a>
<a href="#2">2222</a>
<a href="#3">3333</a>
<a href="#4">4444</a>
</div>
<div id="content">
<div id="#1" class="article-column-content contentActive">1</div>
<div id="#2" class="article-column-content">2</div>
<div id="#3" class="article-column-content">3</div>
<div id="#4" class="article-column-content">4</div>
</div>
<script>
$(' div a').click(function () {
// 点击的下标
const index = $(this).index()
// 点击高亮
$(this).addClass('active').siblings().removeClass('active')
// 显示高亮对应内容
$('#content div').eq(index).addClass('contentActive').siblings().removeClass('contentActive')
})
$(function () {
console.log($('#content'))
})
$('div a').each(function (index, value) {
// 初始化没点击高亮第一个
if (index == 0) {
$(this).addClass('active')
}
})
</script>
</body>
</html>