点击新闻标题，内容随着标题切换

最新推荐文章于 2022-02-22 18:35:02 发布

mydreams_

最新推荐文章于 2022-02-22 18:35:02 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/mydreams_/article/details/51274950

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
         li{list-style: none;}
         .parent{height: 150px;}
        .parent ul li{float: left; width: 25%; text-align: center; background:dodgerblue;height: 50px;vertical-align: middle;font-size:25px;line-height: 50px;}
        .list_c li{display: none;background-color: lightcoral;height: 100px; width: 50%;margin: auto;text-align: center;}
    </style>
</head>
<body>

<div class="parent">
    <ul class="list_p">
        <li>公司新闻</li>
        <li>商城公告</li>
        <li>活动公告</li>
        <li>关于我们</li>
    </ul>
</div>

    <div class="child" >
        <ul class="list_c">
            <li > 公司新闻 </li>
            <li> 商城公告</li>
            <li> 活动公告</li>
            <li> 关于我们</li>
        </ul>
    </div>

<script>
    $(document).ready(function() {
        parent=$(".list_p").children();
        child=$(".list_c").children();
        child[0].style.display="block";
        alert(typeof parent)
        $(parent).click(function(){
            $(".list_c li").css("display","none");
            $(child[ $(this).index() ]).css( "display","block" );
        })
    });
</script>
</body>
</html>