<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/order.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="templates/kw/js/touchslider.js"></script>
<title>微信点菜</title>
</head>
<body>
<div class="new_header">
<a class="new_header_back" href="#">
<img src="icon/back.png"></img>
</a>
<h2>点菜系统</h2>
<a class="new_header_mine" href="#">
<img src="icon/mes.png"></img>
</a>
</div>
<div class="title_bar">
<ul id="pagenavi1" class="newTitle ">
<li >
<span>
<a href="#" id="item0" class="selectbar">面食</a>
</span>
</li>
<li >
<span>
<a href="#" id="item1">荤菜</a>
</span>
</li>
<li >
<span>
<a href="#" id="item2">素菜</a>
</span>
</li>
<li >
<span>
<a href="#" id="item3" >小吃</a>
</span>
</li>
</ul>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<ul class="big_box">
<li class="li_list">
<div class="dishs_">
<div class="dishs">
<img src="images/020011.jpg" width="100%" />
<div class="dishes-name">
<div class="left">凉拌猪耳朵</div>
</div>
</div>
<div class="dishes-operation">
<div class="left">¥48:00</div>
<div class="right">
<a href="#">
<img class="add" src="images/add_unselected.png"></img>
</a>
</div>
</div>
</div>
</li>
<li class="li_list">
<div class="dishs_">
<div class="dishs">
<img src="images/020011.jpg" width="100%" />
<div class="dishes-name">
<div class="left">凉拌猪耳朵</div>
</div>
</div>
<div class="dishes-operation">
<div class="left">¥48:00</div>
<div class="right">
<a href="#">
<img class="add" src="images/add_unselected.png"></img>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide blue-slide">
<ul class="big_box">
<li class="li_list">
<div class="dishs_">
<div class="dishs">
<img src="images/020011.jpg" width="100%" />
<div class="dishes-name">
<div class="left">凉拌猪耳朵</div>
</div>
</div>
<div class="dishes-operation">
<div class="left">¥48:00</div>
<div class="right">
<a href="#">
<img class="add" src="images/add_unselected.png"></img>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide blue-slide">
<ul class="big_box">
<li class="li_list">
<div class="dishs_">
<div class="dishs">
<img src="images/020011.jpg" width="100%" />
<div class="dishes-name">
<div class="left">凉拌猪耳朵</div>
</div>
</div>
<div class="dishes-operation">
<div class="left">¥48:00</div>
<div class="right">
<a href="#">
<img class="add" src="images/add_unselected.png"></img>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="swiper-slide blue-slide">
<ul class="big_box">
<li class="li_list">
<div class="dishs_">
<div class="dishs">
<img src="images/020011.jpg" width="100%" />
<div class="dishes-name">
<div class="left">凉拌猪耳朵</div>
</div>
</div>
<div class="dishes-operation">
<div class="left">¥48:00</div>
<div class="right">
<a href="#">
<img class="add" src="images/add_unselected.png"></img>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="empty_bar"> <!--最后底部的空间距条,防止footer遮盖前面的内容--></div>
<footer class="footer">
<nav class="mainav"> <!--nav 为html5导航链接部分 -->
<ul>
<li class="home">
<a href="default.htm" class="curry">
<img src="icon/home.png" />
</a>
</li>
<li class="prefer">
<a href="site/showcatid12.html" >
<img src="icon/shop.png" />
</a>
</li>
</ul>
<br class="clear" />
</nav>
</footer>
<script type="text/javascript">
var index;
var page = 'pagenavi1';
var as = document.getElementById(page).getElementsByTagName('a');
var mySwiper = new Swiper('.swiper-container',{
loop: false,
onSlideChangeStart: function(swiper){
$("#item"+swiper.activeIndex).addClass("selectbar");
for (var i = 0; i <= as.length; i++) {
if(i!=swiper.activeIndex)
{
$("#item"+i).removeClass();
}
}
没有合适的资源?快使用搜索试试~ 我知道了~
html5 滑动页面切换tab
共131个文件
png:93个
gif:20个
css:9个
3星 · 超过75%的资源 需积分: 4 449 下载量 171 浏览量
2016-02-18
16:32:31
上传
评论 2
收藏 547KB ZIP 举报
温馨提示
html5 滑动页面切换tab,点击tab也可以切换,非常实用。
资源推荐
资源详情
资源评论
收起资源包目录
html5 滑动页面切换tab (131个子文件)
swiper.min.css 17KB
share.css 5KB
xing.css 4KB
back.css 3KB
order.css 3KB
order_list.css 2KB
order_code.css 2KB
refresh.css 1KB
slider.css 1KB
default_220x220.gif 3KB
net_detail_btngray.gif 1KB
header01.gif 1KB
net_detail_btn.gif 931B
btn_bg.gif 473B
time-btn.gif 252B
center.gif 242B
center0.gif 242B
03.gif 225B
header_bei.gif 198B
02.gif 76B
01.gif 74B
left02_right.gif 66B
left01_right.gif 66B
left01_left.gif 65B
left02_left.gif 65B
04.gif 54B
left01_bei.gif 52B
left02_bei.gif 52B
li.gif 36B
order.html 8KB
020011.jpg 119KB
ad_3.jpg 46KB
ad_2.jpg 40KB
top_bg.jpg 8KB
ad_1.jpg 8KB
jquery-1.7.2.min.js 93KB
swiper.min.js 75KB
my.js 344B
icon2b.png 25KB
LOGO-2.png 20KB
icon.png 14KB
logo.png 6KB
icon.png 5KB
bomb.png 4KB
prize.png 4KB
m365-_16.png 4KB
cart.png 4KB
order_unselected.png 4KB
add_unselected.png 3KB
m365-_08.png 3KB
m365-_22.png 3KB
menu1.png 3KB
m365-_23.png 3KB
m365-_03.png 3KB
m365-_17.png 3KB
m365-_10.png 3KB
logo_new.png 3KB
m365-_24.png 3KB
m365-_02.png 3KB
search.png 3KB
m365-_28.png 3KB
categorys.png 3KB
page.png 3KB
succ-img.png 3KB
m365-_06.png 3KB
pagination.png 3KB
sort.png 3KB
back.png 3KB
m365-_13.png 3KB
top.png 3KB
点菜-phone_10.png 3KB
arrow.png 3KB
down.png 3KB
m365-_19.png 3KB
menu2.png 3KB
search_btn.png 3KB
down.png 3KB
menu6.png 3KB
city-icon.png 3KB
m365-_27.png 3KB
m365-_12.png 3KB
right.png 3KB
arrow-c.png 3KB
arrow-b.png 3KB
price.png 3KB
newmenu2.png 3KB
menu3.png 3KB
newmenu1.png 2KB
return-a.png 2KB
newmenu3.png 2KB
iphone_btn.png 2KB
active_bg.png 2KB
search_icon.png 2KB
Android_btn.png 2KB
left_search_btn.png 2KB
more-b.png 2KB
more.png 2KB
newmenu5.png 2KB
cart3.png 2KB
shop.png 2KB
共 131 条
- 1
- 2
资源评论
- 饭野兔2016-06-24很好,谢谢。
- qq_276657812016-05-30写的太复杂,封装的太死。 不如自己写一个
heshuaihe
- 粉丝: 8
- 资源: 62
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功