SOURCE

 <div class="wrapper">
        <input type="radio" name="tab" id="hot" checked>
        <input type="radio" name="tab" id="home">
        <input type="radio" name="tab" id="international">
        <div class="nav">
            <ul class="nav-list">
                <li>
                    <label for="hot">热门新闻</label>
                </li>
                <li>
                    <label for="home">国内新闻</label>
                </li>
                <li>
                    <label for="international">国际新闻</label>
                </li>
            </ul>
        </div>
        <div class="news">
            <ul class="hot-news">
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
                <li>
                    <a href="javascript:;">AAAAAAAAAAA</a>
                </li>
            </ul>
            <ul class="home-news">
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
                <li>
                    <a href="javascript:;">BBBBBBBBBBB</a>
                </li>
            </ul>
            <ul class="international-news">
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
                <li>
                    <a href="javascript:;">CCCCCCCCCCC</a>
                </li>
            </ul>
        </div>
    </div>

 /* 初始化 */
        body, ul, li, a {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
        /* 外面一层容器居中 */
        .wrapper {
            width: 600px;
            /* margin: 0 auto; */
            font-size: 0;
            background-color: #ccc;
        }
        /* 设置导航栏为块级行元素，并将里面的字体垂直居中 */
        .nav .nav-list li {
            display: inline-block;
            width: 200px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            user-select: none;
        }
        /* 设置主题新闻样式以及字体大小 */
        .news ul {
            display: none;
            padding: 20px;
            font-size: 18px;
            background-color: #f7f7f7;
        }
        /* 将主题新闻里的每条新闻空开来 */
        .news li {
            padding: 10px;
        }
        /* 设置主题新闻的字体颜色 */
        .news li a {
            color: #888;
        }
        /* 最关键的一步，利用表单元素的属性，选中或者未选中，来设置，展示新闻主题是哪块 */
        #hot:checked ~ .news .hot-news,
        #home:checked ~ .news .home-news,
        #international:checked ~ .news .international-news {
            display: block;
        } 
        /* 当表单元素被选中时，对应的导航栏背景颜色也跟着变 */
        #hot:checked ~ .nav li:nth-of-type(1),
        #home:checked ~ .nav li:nth-of-type(2),
        #international:checked ~ .nav li:nth-of-type(3)
         {
            background-color: #f7f7f7
        }
        /* 将label标签的设置为行级块元素。同时设置大小，这样点击可点击的范围就变大了 */
        .nav .nav-list label {
            display: inline-block;
            width: 200px;
            height: 50px;
            cursor: pointer;
        }
        /* 将单选框给隐藏掉 */
        .wrapper input {
            display: none;
        }