如何实现点击切换图

Question

想要实现如下效果：

当点击右边的其中一栏时，增加选中效果，如图：

部分代码:`<div id="pic-right">

                <div class="right" id="right1">
                    <div class="pic1">PIC</div>
                    <div class="jieshao">
                        <h3>TITLE OF HIGHLIGHT</h3>
                        <h4>Short descriptions of the highlight on the left.</h4>
                    </div>
                    <div class="xiajiao">
                        <img src="images/xiajiao.png">
                    </div>
                </div>
                <div class="right" id="right2">
                    <div class="pic1">PIC</div>
                    <div class="jieshao">
                        <h3>TITLE OF HIGHLIGHT</h3>
                        <h4>Short descriptions of the highlight on the left.</h4>

                    </div>
                    <div class="xiajiao">
                        <img src="images/xiajiao.png">
                    </div>
                </div>
                <div class="right" id="right3">
                    <div class="pic1">PIC</div>
                    <div class="jieshao">
                        <h3>TITLE OF HIGHLIGHT</h3>
                        <h4>Short descriptions of the highlight on the left.</h4>

                    </div>
                    <div class="xiajiao">
                        <img src="images/xiajiao.png">
                    </div>
                </div>
            </div>`

Answer 1

个人觉着选中右侧缩略图+描述左侧增加小三角可以使用伪元素:after或者:before进行绝对定位不占用原有空间的。