对应内容切换

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul{
        list-style: none;
        max-width: 980px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
    ul>li{
        width:20%;
        text-align: center;
        border-left: 1px solid #333;
        float: left;
        cursor: pointer;
        line-height: 40px;
    }
    ul>li:last-child{
        border-right: 1px solid #333;
    }
    .items{
        max-width: 980px;
        margin: 30px auto;
    }
    .item-content{
        background:#999;
        margin: 10px 0;
        width: 100%;
        height: 100px;
        padding: 10px;
    }
    .active{
        background: #339;
        color: #fff;
        position: relative;
    }
    .active::after{
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        transform: translate(-50%,-50%) rotate(45deg);
        width:16px;
        height: 16px;
        background:#339; 
    }
    .item-content{
        display: none;
    }
    .items .item-content:first-child{
        display: block;
    }
</style>
<ul>
    <li class="active">A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<div class="items">
    <div class="item-content">1</div>
    <div class="item-content">2</div>
    <div class="item-content">3</div>
    <div class="item-content">4</div>
    <div class="item-content">5</div>
</div>

<script>
$(document).ready(function(){
    "use strict";
    $("ul li").on("click",function(){
        $(this).addClass("active").siblings().removeClass("active");
        $(this).parent().next().children().eq($(this).index()).show().siblings().hide();
        
    })
})    
</script>