效果图如下图所示
这些是根据这个模板开发的页面,已部署
仓库地址: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;
}