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">*&nbsp;</span>体检套餐</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>健康之旅</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>健康管理计划</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>基因检测</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>中医检测</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>体能检测</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>心里检测</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</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">*&nbsp;</span>光子嫩肤</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>冰点脱毛</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>果酸换肤</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>玻糖酸</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</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">*&nbsp;</span>口腔种植</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>超薄贴面</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>无痛洁牙</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</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">*&nbsp;</span>功能医学</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</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">*&nbsp;</span>运动康复</a></li>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>度假疗养</a>

<li class="li"><a style="padding-left: 30px;" href="#"><span

class="required">*&nbsp;</span>康复套餐</a>

</ul>

</div>

 

</div>

</div>

<div data-role="footer" data-position="fixed" data-theme="b"></div>

 

</div>

</body>

</html>


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。