您的位置：首页 > 大数据 > 人工智能

左边多级导航切换右边的main

2017-09-29 08:44 197 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../common/jquery-3.1.1.js" type="text/javascript"></script>
<title>左边二级导航切换右边的main</title>
</head>
<style>
ul, li {
list-style: none;
padding: 0;
margin: 0;
}

.left-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 100%;
overflow: auto;
background: #2b3541;
width: 200px;
text-align: center;
}

.zhu {
height: 40px;
line-height: 40px;
color: white;
}

.ci {
background: #1A2226;
transition: all .3s;
display: none;
}

.block {
display: block;
}

li {
height: 40px;
line-height: 40px;
}

.main {
position: absolute;
top: 0;
left: 200px;
/*width: 100%;*/
background: #2aabd2;
}

.main .main-right {
display: none;
width: 800px;
height: 500px;
}

.main .show {
display: block;
}

.selected {
background: #2C3B41;
}
</style>
<body>
<div class="left-nav">
<div class="nav">
<div class="zhu">主一</div>
<ul class="ci">
<li class="selected" data-name="0">次一</li>
<li data-name="1">次二</li>
<li data-name="2">次三</li>
</ul>
</div>
<div class="nav">
<div class="zhu">主一</div>
<ul class="ci">
<li data-name="3">次一</li>
<li data-name="4">次二</li>
<li data-name="5">次三</li>
</ul>
</div>
<div class="nav">
<div class="zhu">主一</div>
<ul class="ci">
<li data-name="6">次一</li>
<li data-name="7">次二</li>
<li data-name="8">次三</li>
</ul>
</div>
<div class="nav">
<div class="zhu">主一</div>
<ul class="ci">
<li data-name="9">次一</li>
<li data-name="10">次二</li>
<li data-name="11">次三</li>
</ul>
</div>
</div>
<div class="main">
<div class="main-right show">1</div>
<div class="main-right">2</div>
<div class="main-right">3</div>

<div class="main-right">4</div>
<div class="main-right">5</div>
<div class="main-right">6</div>

<div class="main-right">7</div>
<div class="main-right">8</div>
<div class="main-right">9</div>

<div class="main-right">10</div>
<div class="main-right">11</div>
<div class="main-right">12</div>

</div>
</body>
<script>
$(function () {
$(".left-nav").on("click", ".zhu", function () {
$(this).siblings(".ci").toggleClass("block")
});
$(".left-nav").on("click", "li", function () {
$(".left-nav li").removeClass("selected");
$(this).addClass("selected");
var index=$(this).data('name');
$(".main>.main-right").eq(index).siblings().removeClass("show");
$(".main>.main-right").eq(index).addClass("show");
});
});
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html CSS javascript

相关文章推荐

新的分享

章节导航