基本信息
源码名称：html5 tab滑动切换
源码大小：0.53M
文件格式：.zip
开发语言：CSS
更新时间：2017-07-25
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 3 元×
微信扫码支付：3 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
<!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();
}
}
}
});
for (var i = 0; i <= as.length; i ) {
(function() {
var j = i;
$('#item' j).click(function(){
mySwiper.slideTo(j, 500, false);
for (var i = 0; i <= as.length; i ) {
$("#item" i).removeClass();
}
$("#item" j).addClass("selectbar");
});
})();
}
</script>
</body>
</html>