jquerymobile
<!DOCTYPE html>
<html>
<head>
<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>
<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 + 2 < L) {
gundong[show].style.display = 'none';
gundong[show + 2].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 + 2 <= L) {
gundong[show - 1].style.display = 'block';
gundong[show + 1].style.display = 'none';
}
}
</script>
<style type="text/css">
ul {
float: left;
margin-right: 5px;
text-align: center;
}
li {
float: left;
margin-right: 5px;
text-align: center;
}
a {
width: 80px;
}
#q {
position: fixed;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<div data-role="controlgroup" data-type="horizontal" style="width: 100%;">
<ul style="width: 100%;">
<li><input type='button' value="<"></li>
<li class="gundong" id="liudong" style="display: block"><a
href="#pageone" data-role="button">转转转转</a></li>
<li class="gundong" id="liudong" style="display: block"><a
href="#" data-role="button">播转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">到转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">新转转转</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">浪</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">微</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">转播到新浪微博</a></li>
<li class="gundong" id="liudong" style="display: none"><a
href="#" data-role="button">转播到新浪微博</a></li>
<li><input type='button' value=">"></li>
</ul>
</div>
</div>
</div>
<div data-role="content">
<p>这些按钮仅供演示，无任何效果。</p>
</div>
<div data-role="footer">
<h1>我的页脚</h1>
</div>
</div>
</body>
</html>