使用html+css+jqery实现的下拉菜单和tab栏切换

移动开发 2023-04-10 04:38:15 阅读次数: 0

效果图如下图所示

在这里插入图片描述

这些是根据这个模板开发的页面，已部署

仓库地址：https://gitee.com/tsymq0729/tab.git

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

简介

该模板可以用做开发如上图所示的页面，将下方代码直接拷贝，然后就可以根据自己psd文件开发自己的页面了哦！下面废话不多说了，直接上代码！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="images/common.css">
    <link rel="stylesheet" href="images/index.css">
    <script src="images/jquery.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="banner_bg">这里放banner</div>

<div class="container w">
    <!-- banner -->
    <div class="container_left">
        <div class="container_left_title">我是左侧标题</div>
    <!-- nav -->
    <div class="nav_container">
        <ul>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        首页
                    </span>
                    <span class="trl"></span>
                </div>

                <ul class="second_menu nav1">
                    <li class="li_item li_active">javascript</li>
                    <li class="li_item">jquery</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        课程中心
                    </span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav2">
                    <li class="li_item">html</li>
                    <li class="li_item">css</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">
                        学习中心
                    </span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav3">
                    <li class="li_item">vue</li>
                    <li class="li_item">react</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">经典案例</span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav4">
                    <li class="li_item">品有够</li>
                    <li class="li_item">念起琴心</li>
                </ul>
            </li>
            <li class="nav">
                <div class="nav_name_container">
                    <span class="nav_name">关于我们</span>
                    <span class="trl"></span>
                </div>
                <ul class="second_menu nav5">
                    <li class="li_item">联系客服</li>
                    <li class="li_item">反馈</li>
                    <li class="li_item">反馈1</li>
                    <li class="li_item">反馈2</li>
                    <li class="li_item">反馈3</li>
                </ul>
            </li>
        </ul>
    </div>
</div>

    <div class="container_right">
        <!-- content -->
       
        <div class="tabbar_list item1 showContent">
            <div class="content_title">学校管理--教育事业发展主要情况（15）</div>
            <div class="list_content">
                <ul>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="list_title">莱州市义务教育学校名录</span>
                            <span class="list_time">2022-08-19</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="list_page">分页</div>
        </div>

        </div>
    </div>
</div>
    <script>
        $(function() {
      
      
            var isTrl = true
            
            $(".nav_container ul li div").click(function () {
      
      
                $(this).parent().children(".second_menu").slideToggle();
                if (isTrl) {
      
      
                    $(this).parent().children(".nav_name_container").children(".trl").addClass("trl_rotate")
                    isTrl = false
                } else {
      
      
                    $(this).parent().children(".nav_name_container").children(".trl").removeClass("trl_rotate")
                    isTrl = true
                }
            })
            $(".nav1 li").click(function() {
      
      

                var nav1 = $(this).index()
                $(".item1").eq(nav1).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav2 li").click(function() {
      
      
                var nav2 = $(this).index()
                $(".item2").eq(nav2).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav3 li").click(function() {
      
      
                var nav3 = $(this).index()
                $(".item3").eq(nav3).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav4 li").click(function() {
      
      
                var nav4 = $(this).index()
                $(".item4").eq(nav4).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".nav5 li").click(function() {
      
      
                var nav5 = $(this).index()
                $(".item5").eq(nav5).addClass("showContent").siblings().removeClass("showContent")
            })
            $(".li_item").click(function () {
      
      
                
                $(this).addClass("li_active").siblings().removeClass("li_active")
                $(this).parent().parent().siblings().children(".second_menu").children(".li_item").removeClass("li_active")
            })
        })
    </script>
</body>

</html>

/* banner */
.banner_bg {
    
    
	width: 100%;
	height: 300px;
	background-color: yellowgreen;
	/* background: url("banner.jpg") no-repeat; */
	/* background-size: 100% 100%; */
}
.nav_container {
    
    
	width: 100%;
}
.nav_container>ul {
    
    
    padding: 0px 20px;
}	
.nav_container ul li {
    
    
	position: relative;
	cursor: pointer;
}
.nav_container ul li a {
    
    
    color: blue;
}

.second_menu {
    
    
	width: 100%;
	height: auto;
	display: none;
}
.second_menu li {
    
    
    width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	color: #2053e4;
	margin-top: 3px;
	padding: 0 -10px;
	float: none;
	border-radius: 10px;
	background-color: #eee;
	cursor: pointer;
	text-align: center;

}
.second_menu li:hover {
    
    
	color: #fff;
	background-color: #2053e4;
}
.li_active {
    
    
	color: #fff !important;
	background-color: #2053e4 !important;
}
.nav_name_container {
    
    
	height: 60px;
	line-height: 60px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.nav_name {
    
    
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #1b3cdb;
	font-size: 24px;
	font-weight: bold;
}
.nav_name::before {
    
    
	position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #2053e4;
    left: -12px;
    top: 27px;
    border-radius: 50%;
}
.trl {
    
    
	width: 0px;
    height: 0px;
    border-top: 7px solid transparent;
    border-left: 7px solid #2053e4;
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
	transition: all 0.3s;
	border-radius: 3px;
}
.trl_rotate {
    
    
	transform-origin: 20% 50%;
	transform: rotate(90deg);
}
.showContent {
    
    
	display: block !important;
}

/* 自定义样式区域 */
.w {
    
    
	width: 1200px;
	margin: 0 auto;
}
.container {
    
    
	margin-top: 40px;
	margin-bottom: 40px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.container_left {
    
    
	width: 240px;
    height: 800px;
	background-color: palevioletred;
	overflow-x: hidden;
	white-space: nowrap;
    /* 隐藏滚动条 */
	scrollbar-width: none; /* firefox */
	-ms-overflow-style: none; /* IE 10+ */
}

.container_left_title {
    
    
	width: 100%;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}
.container_left::-webkit-scrollbar {
    
    
    display: none; /* Chrome Safari */
}
.container_right {
    
    
	width: 930px;
    height: 800px;
	background-color: palevioletred;
}
.tabbar_list {
    
    
	display: none;
	height: 100%;
	width: 100%;
	position: relative;
	background-color: antiquewhite;
}
.list_content {
    
    
	width: 100%;
	height: 690px;
}
.content_title {
    
    
	width: 100%;
    height: 70px;
    line-height: 70px;
    padding-left: 15px;
	font-size: 24px;
	font-weight: bold;
	color: #303fbe;
}
.list_page {
    
    
	width: 350px;
	height: 50px;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: 25px;
	margin: 0 auto;
	background-color: #70db8f;
}
.list_content ul li {
    
    
	width: 100%;
	height: 70px;
	line-height: 70px;
	border-bottom: 1px dashed #999;
}
.list_content ul li:hover span {
    
    
	color: #2053e4;
}
.list_content ul li a {
    
    
	display: flex;
	width: 100%;
	height: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}
.list_content ul {
    
    
	padding: 0 20px;
}
.list_content ul li a span {
    
    
	font-size: 16px;
}
.list_title {
    
    
	width: 75%;
	color: #404040;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.list_time {
    
    
	color: #999;
}

猜你喜欢

转载自blog.csdn.net/m0_60429030/article/details/128398453
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022