jquerymobile

发布时间:2020-06-03 13:57:21 作者:4586558899
来源:网络 阅读:340

<!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">

<h2>庄园项目</h2>

<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 ><input type='button' onclick="getUp()"

value="<"></li>

<li class="gundong" id="liudong" ><a

href="#one" data-role="button">健康体检</a></li>

<li class="gundong" id="liudong" ><a

href="#two" data-role="button">美容抗衰</a></li>

<li class="gundong" id="liudong" ><a

href="#three" data-role="button">口腔健康</a></li>

<li class="gundong" id="liudong" ><a

href="#four" data-role="button">功能医学</a></li>

<li class="gundong" id="liudong" ><a

href="#five" data-role="button">康复疗养</a></li>

<li ><input type='button'

value=">"></li>

</ul>

</div>

<hr>

<div id="one">

<div>


<ul data-role="listview" class="ul">

<li class="li"><a

href="../health/detail.html"><span class="required">*&nbsp;</span>体检套餐</a></li>

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a 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 href="#"><span

class="required">*&nbsp;</span>光子嫩肤</a></li>

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a 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 href="#"><span

class="required">*&nbsp;</span>口腔种植</a></li>

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

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

<li class="li"><a href="#"><span

class="required">*&nbsp;</span>牙齿矫正</a></li>

</ul>

</div>

</div>

<div id="four">

<ul data-role="listview" class="ul">

<li class="li"><a href="#"><span

class="required">*&nbsp;</span>功能医学</a></li>

<li class="li"><a href="#"><span

class="required">*&nbsp;</span>荷尔蒙疗法</a>

</ul>

</div>

<div id="five">

<ul data-role="listview" class="ul">

<li class="li"><a href="#"><span

class="required">*&nbsp;</span>运动康复</a></li>

<li class="li"><a href="#"><span

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

<li class="li"><a 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>


推荐阅读:
  1. php写手机商城涉及到哪些技术
  2. h5中video标签如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery.mobile ue j

上一篇:mysql数据库有哪些基本的操作命令

下一篇:怎么用Java NIO观看文件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》