jquerymobile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet"
href="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet"
href="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="../../../ui/jquery.mobile-1.4.5/js/jquery.js"></script>
<script src="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" type="text/css"
href="../../../ui/main/css/style.css" />
<script type="text/javascript"
src="../../../ui/main/js/jquery-1.8.0.min.js"></script>
<title>项目</title>
</head>
<body>
<div data-role="page">
<script type="text/javascript">
function getDown() {
var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for ( var i = 0; i < L; i++) {
if (gundong[i].style.display == 'block') {
show = i;
break;
}
}
if (show + 3 < L) {
gundong[show].style.display = 'none';
gundong[show + 3].style.display = 'block';
}
}
function getUp() {
var gundong = document.getElementsByClassName("gundong");
var L = gundong.length;
var show = 1;
for ( var i = 0; i < L; i++) {
if (gundong[i].style.display == 'block') {
show = i;
break;
}
}
if (show - 1 >= 0 && show + 3 <= L) {
gundong[show - 1].style.display = 'block';
gundong[show + 2].style.display = 'none';
}
}
</script>
<style type="text/css">
ul {
float: left;
text-align: center;
width: 100%;
}
li {
float: left;
width: 27%;
}
a {
width: 80%;
}
#q {
position: fixed;
}
.ul {
width: 100%;
margin-left: 3%;
}
.li {
width: 100%;
}
.required {
color: red;
padding-left: 5px;
}
</style>
<div data-role="header" data-position="fixed" data-theme="b">
<h1>庄园项目</h1>
<a href="../main.html" data-icon="back" data-iconpos="notext">Back</a>
<a href="#opt-panel" data-icon="gear" data-iconpos="notext">Options</a>
</div>
<div data-role="ui-content">
<div data-role="tabs" id="tabs">
<div data-role="controlgroup" data-type="horizontal">
<ul>
<li style="width: 9%;"><input type='button' onclick="getUp()"
value="<"></li>
<li class="gundong" id="liudong" style="display: block"><a
href="#one" data-role="button">健康体检</a></li>
<li class="gundong" id="liudong" style="display: block"><a
href="#two" data-role="button">美容抗衰</a></li>
<li class="gundong" id="liudong" style="display: block"><a
href="#three" data-role="button">口腔健康</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#four" data-role="button">功能医学</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#five" data-role="button">康复疗养</a></li>
<li style="width: 9%;"><input type='button'
value=">"></li>
</ul>
</div>
<hr>
<div id="one">
<div>
<ul data-role="listview" class="ul">
<li class="li"><a style="padding-left: 30px;"
href="../health/detail.html"><span class="required">* </span>体检套餐</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>健康之旅</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>健康管理计划</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>基因检测</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>中医检测</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>体能检测</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>心里检测</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>营养评估</a></li>
</ul>
</div>
</div>
<div id="two">
<div>
<ul data-role="listview" class="ul">
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>光子嫩肤</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>冰点脱毛</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>果酸换肤</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>玻糖酸</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>保妥适</a></li>
</ul>
</div>
</div>
<div id="three">
<div>
<ul data-role="listview" class="ul">
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>口腔种植</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>超薄贴面</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>无痛洁牙</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>牙齿矫正</a></li>
</ul>
</div>
</div>
<div id="four">
<ul data-role="listview" class="ul">
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>功能医学</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>荷尔蒙疗法</a>
</ul>
</div>
<div id="five">
<ul data-role="listview" class="ul">
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>运动康复</a></li>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>度假疗养</a>
<li class="li"><a style="padding-left: 30px;" href="#"><span
class="required">* </span>康复套餐</a>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-theme="b"></div>
</div>
</body>
</html>