108 lines
2.7 KiB
HTML
108 lines
2.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>分类</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<link rel="shortcut icon" href="">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<link rel="stylesheet" href="./css/clear.css">
|
|
<link rel="stylesheet" href="./css/sm.css">
|
|
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
|
|
<link rel="stylesheet" href="./css/class.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="left">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 工具栏 -->
|
|
<nav class="bar bar-tab">
|
|
<a class="tab-item external active" href="./index.html">
|
|
<span class="icon icon-home"></span>
|
|
<span class="tab-label">推荐</span>
|
|
</a>
|
|
<a class="tab-item external" href="#">
|
|
<span class="icon icon-computer"></span>
|
|
<span class="tab-label">视频</span>
|
|
<span class="badge">2</span>
|
|
</a>
|
|
<a class="tab-item external" href="#">
|
|
<span class="icon icon-app"></span>
|
|
<span class="tab-label">分类</span>
|
|
</a>
|
|
<a class="tab-item external" href="#">
|
|
<span class="icon icon-menu"></span>
|
|
<span class="tab-label">菜单</span>
|
|
</a>
|
|
<a class="tab-item external" href="#">
|
|
<span class="icon icon-star"></span>
|
|
<span class="tab-label">收藏</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="right">
|
|
<ul>
|
|
</ul>
|
|
</div>
|
|
|
|
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
|
|
<script src="./js/type.js"></script>
|
|
<script>
|
|
|
|
const id = location.search.split("=")[1];
|
|
|
|
function renderUrl() {
|
|
type.result.forEach((val,index)=> {
|
|
if (val.parentId === id) {
|
|
bindClick( $(".left ul li").eq(index), index)
|
|
|
|
}
|
|
})
|
|
}
|
|
|
|
function RenderLeft() {
|
|
type.result.forEach(function (val,index) {
|
|
$(".left ul").append(`<li class="${index === 0 ? 'active' : '' }">${val.name}</li>`)
|
|
});
|
|
|
|
$(".left ul li").on('click', function () {
|
|
bindClick(this, $(this).index())
|
|
})
|
|
|
|
}
|
|
|
|
|
|
function bindClick(el, index) {
|
|
$(".right ul").empty()
|
|
el == null ? '' : $(el).addClass("active").siblings().removeClass("active")
|
|
const ri = type.result[index].list;
|
|
|
|
ri.forEach((val,index)=>{
|
|
$(".right ul").append(`
|
|
<li>
|
|
<a href="./list.html?menu_name=${val.name}">
|
|
<p>${val.name}</p>
|
|
</a>
|
|
</li>
|
|
`)
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
RenderLeft()
|
|
|
|
bindClick(null, 0)
|
|
renderUrl()
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html> |