stu-compete
/
community.html

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>社区</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/community.css">
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js"></script>
    <script src="./js/login.js"></script>
</head>

<body>
    <!-- 顶部 -->
    <div class="header">
        <img class="logo-l" src="./imgs/logo.png">
        <div class="topnav">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="allCompete.html">竞赛汇总</a></li>
                <li><a href="joinTeam.html">组队</a></li>
                <li class="on"><a href="community.html">社区</a></li>
                <li><a href="jobs.html">实习求职</a></li>
                <li><a href="">优秀作品</a></li>
                <li><a href="">关于我们</a></li>
            </ul>
        </div>
        <!-- 搜索 -->
        <div class="search-box">
            <input id="top_search" type="search" placeholder="搜比赛或用户">
        </div>
        <!-- 头像 -->
        <div class="logoinbox" id="loginbox">
            <img class="logo" src="./imgs/logo.png">
            <span><a href="./login.html">登录</a></span>
        </div>
    </div>

    <!-- 主体 -->
    <div class="container conmain">
        <!-- 导航 -->
        <div class="cennav">
            <p class="on">问答</p>
            <p>文章</p>
            <p>图书</p>
            <p>文库</p>
            <p>校园活动</p>
        </div>
        <!-- 切换区 -->
        <div class="nav-contain">
            <!-- 问答 -->
            <div class="wrap-wenda" style="display:block">
                <ul class="shop-list wdlist">
                    <li>
                        <div class="child-l">
                            <p class="tit">匿名 | 想考北大金融系研究生，求推荐复习数目！谢谢！</p>
                            <div class="main">
                                <div class="head">
                                    <img src="./imgs/logo.png">
                                    <span class="name">宋小宝</span>
                                    <span class="time">2020-1-20</span>
                                </div>
                                <p class="text">
                                    哈喽，我是赛赛。谈星星谈月亮谈竞赛，我在群里等你！
                                    【竞赛群】赛氪大学生英语竞赛：326057039赛氪数学建模竞赛群：423876344赛氪大学生数学竞赛：572887227赛氪大学生力学竞赛：16834313
                                </p>
                                <div class="foot">
                                    <div class="item">
                                        <i class="star"></i>
                                        <span>关注</span>
                                        <span>101</span>
                                    </div>
                                    <div class="item">
                                        <i class="msg"></i>
                                        <span>评论</span>
                                        <span>28</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="child-r">
                            <div class="item look">
                                <p>1666</p>
                                <i class="icon-look"></i>
                                <p>浏览</p>
                            </div>
                            <div class="item ask">
                                <p>1666</p>
                                <i class="icon-ask"></i>
                                <p>问答</p>
                            </div>
                            <div class="item like">
                                <p>1666</p>
                                <i class="icon-like"></i>
                                <p>收藏</p>
                            </div>

                        </div>
                    </li>
                    <li>
                        <div class="child-l">
                            <p class="tit">匿名 | 想考北大金融系研究生，求推荐复习数目！谢谢！</p>
                            <div class="main">
                                <div class="head">
                                    <img src="./imgs/logo.png">
                                    <span class="name">宋小宝</span>
                                    <span class="time">2020-1-20</span>
                                </div>
                                <p class="text">
                                    哈喽，我是赛赛。谈星星谈月亮谈竞赛，我在群里等你！
                                    【竞赛群】赛氪大学生英语竞赛：326057039赛氪数学建模竞赛群：423876344赛氪大学生数学竞赛：572887227赛氪大学生力学竞赛：16834313
                                </p>
                                <div class="foot">
                                    <div class="item">
                                        <i class="star"></i>
                                        <span>关注</span>
                                        <span>101</span>
                                    </div>
                                    <div class="item">
                                        <i class="msg"></i>
                                        <span>评论</span>
                                        <span>28</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="child-r">
                            <div class="item look">
                                <p>1666</p>
                                <i class="icon-look"></i>
                                <p>浏览</p>
                            </div>
                            <div class="item ask">
                                <p>1666</p>
                                <i class="icon-ask"></i>
                                <p>问答</p>
                            </div>
                            <div class="item like">
                                <p>1666</p>
                                <i class="icon-like"></i>
                                <p>收藏</p>
                            </div>

                        </div>
                    </li>
                    <li>
                        <div class="child-l">
                            <p class="tit">匿名 | 想考北大金融系研究生，求推荐复习数目！谢谢！</p>
                            <div class="main">
                                <div class="head">
                                    <img src="./imgs/logo.png">
                                    <span class="name">宋小宝</span>
                                    <span class="time">2020-1-20</span>
                                </div>
                                <p class="text">
                                    哈喽，我是赛赛。谈星星谈月亮谈竞赛，我在群里等你！
                                    【竞赛群】赛氪大学生英语竞赛：326057039赛氪数学建模竞赛群：423876344赛氪大学生数学竞赛：572887227赛氪大学生力学竞赛：16834313
                                </p>
                                <div class="foot">
                                    <div class="item">
                                        <i class="star"></i>
                                        <span>关注</span>
                                        <span>101</span>
                                    </div>
                                    <div class="item">
                                        <i class="msg"></i>
                                        <span>评论</span>
                                        <span>28</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="child-r">
                            <div class="item look">
                                <p>1666</p>
                                <i class="icon-look"></i>
                                <p>浏览</p>
                            </div>
                            <div class="item ask">
                                <p>1666</p>
                                <i class="icon-ask"></i>
                                <p>问答</p>
                            </div>
                            <div class="item like">
                                <p>1666</p>
                                <i class="icon-like"></i>
                                <p>收藏</p>
                            </div>

                        </div>
                    </li>
                </ul>
                <!-- 加载更多 -->
                <div class="load-on">
                    <i></i>
                    <p>下拉加载更多...</p>
                </div>
            </div>

            <!-- 文章 -->
            <div class="" style="display: none;">
                文章相关
            </div>

            <!-- 图书 -->
            <div class="" style="display: none;">
                图书相关
            </div>
        </div>
    </div>
    </div>

    <script>
        $(function () {
            // 点击主体导航栏下方展示相应子区域
            $(".cennav>p").click(function () {
                // 获取content容器的子div，得到集合divShow
                var divShow = $(".nav-contain").children("div");
                // 利用样式进行判断
                if (!$(this).hasClass("on")) {
                    // 获取导航栏和div对应的顺序索引
                    var index = $(this).index();
                    $(this).addClass("on").siblings("p").removeClass("on");
                    $(divShow[index]).show().siblings("div").hide();
                }
            });
        })
    </script>
</body>

</html>