<!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 name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link herf="bs/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/js.js"></script>
<title>乡村美食</title>
<style type="text/css">
</style>
</head>
<body>
<table align="center" bgcolor="blue" >
<div class="clearfix nav">
<div class='logo' href="javascript:;"></div>
<!--<a class="logo" href="javascript:;"></a>-->
<ul class="clearfix nav-wrap">
<li><a class="nav-item" href="超链接">首页</a></li>
<li><a class="nav-item" href="超链接">风景</a></li>
<li><a class="nav-item nav-active" href="meishi.html">美食</a></li>
<li><a class="nav-item" href="超链接">购物</a></li>
<li><a class="nav-item" href="超链接">注册</a></li>
<li><a class="nav-item" href="超链接">登录</a></li>
<li><a class="nav-item" href="超链接">下载app</a></li>
</ul>
</div>
<b><hr></b>
<div class="login"> <span class="login-text"><a href="#" onclick="showFloat()">登录</a></span> <span> | </span> <span class="login-text"><a href="2.html">注册</a></span> <span> | </span> <span class="login-text"><a href="#" onclick="showFloat1()">下载APP</a></span> </div>
</nav>
<div id="doing" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: fixed;left:0;top:0;display:none;overflow: hidden;"> </div>
<!--加一个登录层-->
<div id="divLogin" style="border: solid 6px #00a1ff;background:url(img/3.jpg);padding:10px;width:400px;z-index:1001;height:400px; position: fixed; display:none;top:50%; left:50%;margin:-255px 0 0 -200px; border-radius: 25px;">
<div align="center" style="font-size: 19px; margin:15px; color: #003566; font-family: Helvetica Neue;">会员登录</div>
<hr style="border:1.5px solid #1cbeff;">
<div style="padding:3px 15px 3px 15px;text-align:left;vertical-align:middle;">
<div align="center">用户名：
<input type="text" style="border:1px solid #898989;height:20px;" id="txtUserName">
<br>
<br>
密 码：
<input type="password" style="border:1px solid #898989;height:20px;margin-left:10px;" id="txtPwd" onkeydown="if(event.keyCode==13) {Login();}">
</div>
<br/>
<div style="text-align:center;">
<input type="submit" id="BttLogin" class="btn" value="登 录" onclick="Login();"/>
<input type="button" id="BttCancel" class="btn" value="取 消" onclick="ShowNo()"/>
</div>
</div>
</div>
<div id="do" style="filter:alpha(opacity=30);-moz-opacity:0.3;opacity:0.3;background-color:#000;width:100%;height:100%;z-index:1000;position: fixed;left:0;top:0;display:none;overflow: hidden;"> </div>
<!--加一个登录层-->
<div id="div" onmouseover="ShowNo1()" style="border: solid 20px #00a1ff;background:url(img/3.jpg);padding:10px;width:400px;z-index:1001;height:200px; position: fixed; display:none;top:60%; left:50%;margin:-255px 0 0 -200px; border-radius: 25px;">
<div id="hid" align="center" style="font-size: 50px; margin:70px; color: #003566; font-family: Helvetica Neue;">敬请期待</div>
</div>
<!----------------------------------------------------------------->
<div id="playBox">
<div class="pre"></div>
<div class="next"></div>
<div class="smalltitle">
<ul>
<li class="thistitle"></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="oUlplay">
<li><a target="_blank"><img src="images/1.jpg"</a></li>
<li><a target="_blank"><img src="images/2.jpg"</a></li>
<li><a target="_blank"><img src="images/3.jpg"</a></li>
</ul>
</div>
<b><hr></b>
<ul class="breadnav clearfix">
<li class="bnav-item"><a href="index.html">跳转首页</a></li>
<li class="bnav-item"><</li>
<li class="bnav-item"><a href="meishi.html">跳转美食</a></li>
<li class="bnav-item"><</li>
<li class="bnav-item"><a href="javascript:;">全部菜品</a></li>
</ul>
<div class="clearfix table-wrap" id="tab-span">
<span class="table-item table-active">地方特色美食</span>
<span class="table-item">香榧之乡</span>
<span class="table-item">珍珠</span>
<!--<span class="table-item">添加</span>
<span class="table-item">添加</span>
<span class="table-item">添加</span>-->
<span class="table-item">其他</span>
<!------------------------------------------------------------------------>
<div class="search clearfix">
<input class="inp-txt" type="text" name="address" value="输入关键字"
onfocus="if(this.value=='输入关键字'){this.value=''};this.style.color='black';"
onblur="if(this.value==''||this.value=='输入关键字'){this.value='输入关键字';this.style.color='gray';}" />
<input class="inp-btn" type="button" name="" id="" value="搜索" />
</div>
</div>
<!--------------------------------内容------------------------------>
<table align="center" bgcolor="blue" >
<div id="table-div">
<div class="table-pic table-show clearfix">
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic1.jpg" alt="西施豆腐" width="427" height="319" />
</span>
<h2 class="ms-tit">西施豆腐</h2>
<p class="ms-txt">价格：39元</p>
</a>
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic2.jpg" alt="西施故里鲜虾饼" width="427" height="319" />
</span>
<h2 class="ms-tit">西施故里鲜虾饼</h2>
<p class="ms-txt">价格：22元</p>
</a>
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic3.jpg" alt="西施豆腐" width="427" height="319" />
</span>
<h2 class="ms-tit">西施团圆饼</h2>
<p class="ms-txt">价格：39元</p>
</a>
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic4.jpg" alt="西施故里鲜虾饼" width="427" height="319" />
</span>
<h2 class="ms-tit">西施舌</h2>
<p class="ms-txt">价格：22元</p>
</a>
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic5.jpg" alt="西施豆腐" width="427" height="319" />
</span>
<h2 class="ms-tit">马剑镘头</h2>
<p class="ms-txt">价格：39元</p>
</a>
<a href="meishi-con.html" class="ms-wrap ms-right">
<span class="ms-pic">
<img src="img/ms-pic6.jpg" alt="西施故里鲜虾饼" width="427" height="319" />
</span>
<h2 class="ms-tit">次坞打面</h2>
<p class="ms-txt">价格：22元</p>
</a>
</div>
</table>
<!--翻页，需要再复制一遍-->
<ul class="ms-paging clearfix">
<li><a href="javascript:;" class="pag-item"><</a></li>
<li><a href="javascript:;" class="pag-item pag-active">1</a></li>
<li><a href="javascript:;" class="pag-item">2</a></li>
<li><a href="javascript:;" class="pag-item">></a></li>
</ul>
</div>
<!----底部重要信息和jq调用--->
<footer>
<div class="foot">
<div class="foot-wrap">
<p class="foot-tit">友情链接</p>
<ul class="foot-link clearfix">
<li class="foot-pic">
<a href="javascript:;"><img src="img/link3.png"/></a>
</li>
<li class="foot-pic">
<a href="javascript:;"><img src="img/link2.png"/></a>
</li>
<li class="foot-pic">
<a href="javascript:;"><img src="img/link1.png"/></a>
</li>
</ul>
<div class="copyright">
<p> Powered by PHP&C-D-T </p>
<p> Copyright 2019 All Rights Reserved</p>
<p>ICP备案号：浙ICP备11046845号，如信息涉及隐私等，网站不承担任何责任！</p>
</div>
</div>
</div>
</footer>
</table>
</body>
<!--jq调用-->
<script src="js/jquery-1.11.0.js" type="text/javascript"></script>
<script type="text/javascript">
//导航当前项切换
$(".nav-item").click(function(){
$(this).parent("li").siblings().children().removeClass("nav-active");
//点击对象的父级（li）的兄弟级（li）的子集（a）移除类
$(this).addClass("nav-active");
//给点击对象添加类
});
//美食系列当前项切换
$(".table-item").click(function(){
$(this).siblings().removeClass("table-active");
$(this).addClass("table-active");
});
//美食系列table切换
var oSpan = document.getElementById("tab-span");
var spans = oSpan.querySelectorAll("span");
var oDiv = document.getElementById("table-div");
var divs = oDiv.querySelectorAll("div");
var last=spans[0];
for(var i=0;i<spans.length;i++){
spans[i].index=i; //给每一个按钮添加一个自定义属性，存储的是他们对应的索引值；
spans[i].onclick=function(){
divs[last.index].style.display="none"; //上一个对应的div，让他隐藏
divs[this.index].style.display="block"; //当前点击按钮对应的div显示
last=this; //把上一次点击的对象更新成当前点击的对象
};
};
</script>
</html>
求高手指教
2521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
