先写了一个占位的侧边栏，还不能伸展，也没有填充好页面。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="sidebar.css" rel="stylesheet" />
<script src="jquery-2.2.0.min.js"></script>
<script>
var show = function() {
// 使用JQuery的makeArray 将 getElementsByClassName返回的类数组转化为数组
arr = $.makeArray(document.getElementsByClassName('card'));
// 当前选中的元素
selected = arr[arguments[0]];
// 遍历数组，设置css 的 display属性
arr.forEach(
function(card) {
if(card == selected)
$(card).css('display','block');
else
$(card).css('display','none');
}
);
}
</script>
</head>
<body>
主页
<div class='div' style="position: absolute; right: 0px;width: 300px;top: 0px;">
<!--导航-->
<div id="tabs">
<span class="tab" onclick="show(0);">One</span>
<span class="tab" onclick="show(1);">Two</span>
<span class="tab" onclick="show(2);">Three</span>
</div>
<span class="card" style="display: none;">
<div style="background: red;" class="inner">1</div>
</span>
<span class="card" style="display: none;">
<div style="background: green;" class="inner">2</div>
</span>
<span class="card" style="display: none;">
<div style="background: blue;" class="inner">3</div>
</span>
</div>
</body>
</html>css
body {
font-size: 16px;
margin: 8px;
}
.div {
border: 1px dashed;
}
#tabs .tab{
margin: 20px;
border: 1px dashed;
}
.inner {
height: 100px;
width: 100%;
}
样子
