意外之喜：伪元素结构轻松实现上下点击的联动效果

::after和::before是虚拟元素，不会影响真正元素的所在文档的位置
原理：::after和::before不是真正的节点，所以我们取不到他们，也不发设置点击等用户事件。::after和::before虽然是不能设置事件，但还会捕获用户事件，并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。

html

                <div class="strategy-content-month">
                    <div>
                        <a href="javascript:;">1月</a>
                        <a href="javascript:;">2月</a>
                        <a href="javascript:;">3月</a>
                        <a href="javascript:;">4月</a>
                        <a href="javascript:;" class="active">5月</a>
                        <a href="javascript:;">6月</a>
                        <a href="javascript:;">7月</a>
                        <a href="javascript:;">8月</a>
                        <a href="javascript:;">9月</a>
                        <a href="javascript:;">10月</a>
                        <a href="javascript:;">11月</a>
                        <a href="javascript:;">12月</a>
                    </div>
                    <div><img src="./images/line.png" alt=""></div>
                </div>

css

.strategy-content-month>div a::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -69%;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background-color: #ccc;
}

/* border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适不过了 */
.strategy-content-month>div a::before {
    display: none;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -18%;
    border-top: 8px solid #1ab2db;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

jquery

    // strategy-content-month && strategy-content-type
    $('.strategy-content-month a').on('click', function() {
        $(this).addClass('active').siblings().removeClass();
    })