<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery手机左侧导航锚点定位代码</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" viewport-fit="cover">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<!--框架.css-->
<link rel="stylesheet" href="css/mui.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<style>
.mui-row.mui-fullscreen>[class*="mui-col-"] {
height: 100%;
}
.mui-col-xs-3,
.mui-col-xs-9 {
overflow-y: auto;
height: 100%;
}
.mui-segmented-control .mui-control-item {
line-height: 50px;
width: 100%;
}
.mui-control-content {
display: block;
}
.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
background-color: #fff;
}
</style>
</head>
<body>
<!--顶部-->
<div class="" style="height: 180px;width: 100%;"></div>
<!--主要内容-->
<div class="mui-content mui-row mui-fullscreen" style="top:180px;">
<div class="mui-col-xs-3">
<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
<a class="mui-control-item mui-active" >选项1</a>
<a class="mui-control-item " >选项2</a>
<a class="mui-control-item " >选项3</a>
<a class="mui-control-item " >选项4</a>
<a class="mui-control-item " >选项5</a>
</div>
</div>
<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
<div class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1个选项卡子项-1<br>555555</li>
<li class="mui-table-view-cell">第1个选项卡子项-2</li>
<li class="mui-table-view-cell">第1个选项卡子项-3</li>
<li class="mui-table-view-cell">第1个选项卡子项-4</li>
<li class="mui-table-view-cell">第1个选项卡子项-5</li>
<li class="mui-table-view-cell">第1个选项卡子项-6</li>
<li class="mui-table-view-cell">第1个选项卡子项-7</li>
<li class="mui-table-view-cell">第1个选项卡子项-8</li>
</ul>
</div>
<div class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2个选项卡子项-1<br>555555</li>
<li class="mui-table-view-cell">第2个选项卡子项-1<br>555555</li>
<li class="mui-table-view-cell">第2个选项卡子项-1<br>555555</li>
<li class="mui-table-view-cell">第2个选项卡子项-1<br>555555</li>
</ul>
</div>
<div class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第3个选项卡子项-1<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-2<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-3<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-4<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-5<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-6<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-7<br>555555<br>555555</li>
<li class="mui-table-view-cell">第3个选项卡子项-8<br>555555<br>555555</li>
</ul>
</div>
<div class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-2</li>
<li class="mui-table-view-cell">第4个选项卡子项-3</li>
<li class="mui-table-view-cell">第4个选项卡子项-4</li>
<li class="mui-table-view-cell">第4个选项卡子项-5</li>
<li class="mui-table-view-cell">第4个选项卡子项-6</li>
<li class="mui-table-view-cell">第4个选项卡子项-7</li>
<li class="mui-table-view-cell">第4个选项卡子项-8</li>
</ul>
</div>
<div class="mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第4个选项卡子项-1<br>555555<br>555555<br>555555</li>
<li class="mui-table-view-cell">第5个选项卡子项-1</li>
<li class="mui-table-view-cell">第5个选项卡子项-2</li>
<li class="mui-table-view-cell">第5个选项卡子项-3</li>
<li class="mui-table-view-cell">第5个选项卡子项-4</li>
<li class="mui-table-view-cell">第5个选项卡子项-9</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery.1.11.1.js"></script>
<script type="text/javascript" src="js/scroll.js" ></script>
</body>
</html>
jQuery手机左侧导航锚点定位代码.zip
版权申诉
26 浏览量
2023-09-23
09:57:36
上传
评论
收藏 83KB ZIP 举报
jQuery手机左侧导航锚点定位代码.zip （6个子文件） 
js 
scroll.js 5KB jquery.1.11.1.js 94KB mui.min.js 121KB css mui.css 95KB app.css 285B
index.html 5KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
