当添加ASP代码时，导航在移动中消失，其他脚本在页面上冻结
When Adding ASP Code, Navigation goes away in mobile and Other scripts freeze on the page
当我的页面中没有ASP代码时，一切都很完美：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Customer Reviews</title>
<meta name="description" content="Hello world!">
<meta name="author" content="">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:400,300,700|Orbitron:700' rel='stylesheet' type='text/css'> -->
<!-- Import CSS -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/products.css">
<!--[if lt IE 10]>
<link href= "css/ie.css" rel= "stylesheet" media= "all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<style>
#imgThumbs {
overflow: hidden;
/* margin: 20px auto;*/
width: 396px;
text-align: center;
margin-left:-50px;
}
.showImg {
width: 100px;
padding: 15px;
float:left;
border: 1px solid #fff;
border-radius: 5px;
}
#imgHolder {
text-align:center;
width: 100%;
}
.imgDescription {
color: #fff;
visibility: hidden;
opacity: 0;
margin-top: -105px;
margin-bottom: 85px;
font-size: 25px;
/*padding-left: 50px;*/
text-align:center;
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
.ProductInfo{
font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
margin-top: 15px;
}
.color-textgreen {
color: rgb(0, 153, 51);
}
</style>
<body>
<!-- #include file="layout-header.asp" -->
<div class="wrapper-basic">
<!-- Start -->
<section id="portfolio" class="page" style="padding-bottom:0px;">
<div class="container">
<div class="span4">
<center><img src="img/ProductAIO.jpeg"/></center>
</div>
<div class="span6" style="float:right;">
<div class="title" style="font-size:30px; margin-bottom:0px">TITLE</div>
<hr>
</div>
<div class="span6" style="float:right;">
<div class="ProductInfo">
<br>
<p style="font-size:18px"><strong>Your Price:</strong><span class="color-textgreen"><strong> $1,259.00</strong></span><br>
</p>
<br>
<!--<h3> <strong><span class="color-text">Ship Date:</span></strong></h3>-->
<p>Stock Status: Call To Check<br></p>
<br>
<p>Components: Ship within 24-48 hours<br>
Laptops/Computers: 5-10 Business days</p>
</div>
</div>
<br>
<!-- Start Tabs -->
<div class="tabs">
<ul>
<li id="tab1" class="current">OVERVIEW</li>
<li id="tab2">SPECIFICATIONS</li>
<li id="tab3">REVIEWS</li>
</ul>
<div class="tab-content-wrp">
<div id="tab1-content" class="tab-content active">
<p>Pellentesque est dolor, malesuada et ultrices eu, fringilla sed magna. Mauris neque turpis, faucibus et tempus quis, accumsan at nunc. Nam placerat tristique dolor non lobortis.</p>
<p>Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
</div>
<div id="tab2-content" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.</p>
<p>In vitae ipsum ac neque aliquam rutrum ac in metus. Sed sed est tincidunt mauris mattis hendrerit. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tab3-content" class="tab-content">
<p>Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.</p>
</div>
</div>
</div>
<!-- End Tabs -->
</div>
<!-- END OF CONTAINER -->
</section>
<!-- End -->
<!-- #include file="layout-footer.asp" -->
</body>
</html>
但当我添加这个ASP代码时，部分移动导航将消失，底部的选项卡将不再工作。其中包含的javascript会冻结。我知道它是ASP代码，因为没有它，它工作得很好。
<!-- #include file="db.asp" -->
<%
sqlCustomer = "SELECT * FROM products WHERE catalogID = " & Replace(Trim(Request.QueryString("id")),"'","")
call openConn()
Set rs = Server.CreateObject ("adodb.Recordset") ' dont touch
rs.Open sqlCustomer, dbc, adOpenForwardOnly, adLockReadOnly, adCmdText
%>
<%
Response.Write "<form action=""" & Application("secureurl") & "/cart/view-cart.asp"" method=""POST"" name=""form"">"
Response.Write "<input type=""hidden"" name=""fproductid"" value=""" & rs("catalogID") & """>"' dont touch
Response.Write "<input type=""hidden"" name=""fquantity"" value=""1"">" ' dont touch
Response.Write "<input type=""hidden"" name=""fcat"" value=""" & rs("ccategory") & """>"
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Product Page </title>
<meta name="description" content="Hello world!">
<meta name="author" content="">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Import CSS -->
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/products.css">
<!--[if lt IE 10]>
<link href= "css/ie.css" rel= "stylesheet" media= "all" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<style>
#imgThumbs {
overflow: hidden;
/* margin: 20px auto;*/
width: 396px;
text-align: center;
margin-left:-50px;
}
.showImg {
width: 100px;
padding: 15px;
float:left;
border: 1px solid #fff;
border-radius: 5px;
}
#imgHolder {
text-align:center;
width: 100%;
}
.imgDescription {
color: #fff;
visibility: hidden;
opacity: 0;
margin-top: -105px;
margin-bottom: 85px;
font-size: 25px;
/*padding-left: 50px;*/
text-align:center;
}
.imgWrap:hover .imgDescription {
visibility: visible;
opacity: 1;
}
.ProductInfo{
font-family: 'Open Sans', 'Trebuchet MS', sans-serif;
margin-top: 15px;
}
.color-textgreen {
color: rgb(0, 153, 51);
}
</style>
<body>
<!-- #include file="layout-header.asp" -->
<!-- Start -->
<div class="wrapper-basic">
<section id="portfolio" class="page" style="padding-bottom:0px;">
<div class="container">
<div class="span4">
<center><img src="img/ProductAIO.jpeg"/></center>
</div>
<!-- END OF SPAN 4 -->
<div class="span6" style="float:right;">
<div class="title" style="font-size:30px; margin-bottom:0px">TITLE</div>
<hr>
</div>
<div class="span6" style="float:right;">
<div class="ProductInfo">
<br>
<p style="font-size:18px"><strong>Your Price:</strong><span class="color-textgreen"><strong> $1,259.00</strong></span><br>
</p>
<%
Response.Write "<button class=""btn"" TYPE=""btn"" style=""background-color: #42a92a;color: #fff;"" >ADD TO CART</button> </form>"
%>
<%
rs.close
set rs = nothing
call closeConn()
%>
<br>
<!--<h3> <strong><span class="color-text">Ship Date:</span></strong></h3>-->
<p>Stock Status: Call To Check<br>
</p>
<br>
<p>Components: Ship within 24-48 hours<br>
Laptops/Computers: 5-10 Business days</p>
</div>
</div>
<br>
<br>
<!-- Start Tabs -->
<div class="tabs">
<ul>
<li id="tab1" class="current">OVERVIEW</li>
<li id="tab2">SPECIFICATIONS</li>
<li id="tab3">REVIEWS</li>
</ul>
<div class="tab-content-wrp">
<div id="tab1-content" class="tab-content active">
<p>Pellentesque est dolor, malesuada et ultrices eu, fringilla sed magna. Mauris neque turpis, faucibus et tempus quis, accumsan at nunc. Nam placerat tristique dolor non lobortis.</p>
<p>Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
</div>
<div id="tab2-content" class="tab-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.</p>
<p>In vitae ipsum ac neque aliquam rutrum ac in metus. Sed sed est tincidunt mauris mattis hendrerit. Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="tab3-content" class="tab-content">
<p>Aliquam volutpat arcu et nibh mollis eleifend pharetra lorem scelerisque. Donec vel enim purus, id viverra neque. Cras in velit ante, eget pellentesque sem. Duis tincidunt erat quam. Etiam placerat sapien elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas neque diam, luctus at laoreet in, auctor ut tellus. Etiam enim lacus, ornare et tempor, rhoncus rhoncus sem.</p>
</div>
</div>
</div>
<!-- End Tabs -->
</div>
<!-- END OF CONTAINER -->
</section>
<!-- END OF SECTION -->
</div>
<!-- End -->
<!-- #include file="layout-footer.asp" -->
</body>
</html>
这不是一个完整的答案，因为我真的不知道你的ASP包含文件中有什么。如果你看一下，ASP输出的FORM标记已经移动到了正文中。否则，HTML将被破坏。我倾向于相信会有更多的坏零件。这就是我看到的和HTML代码有关的最大问题。
我不喜欢发布不完整的答案，但在评论栏里谈论太多了。
而且，连接SQL语句是个坏消息。。。请对SQL注入攻击进行一些搜索。
<!-- #include file="db.asp" -->
<!DOCTYPE html>
<html lang="en">
<head><!-- header content removed to save space --></head>
<style>/* styles removed to save space */</style>
<body>
<!-- #include file="layout-header.asp" -->
<!-- Start -->
<div class="wrapper-basic">
<section id="portfolio" class="page" style="padding-bottom:0px;">
<div class="container">
<div class="span4">
<center><img src="img/ProductAIO.jpeg"/></center>
</div>
<!-- END OF SPAN 4 -->
<div class="span6" style="float:right;">
<div class="title" style="font-size:30px; margin-bottom:0px">TITLE</div>
<hr>
</div>
<div class="span6" style="float:right;">
<div class="ProductInfo">
<br>
<p style="font-size:18px">
<strong>Your Price:</strong><span class="color-textgreen">
<strong> $1,259.00</strong></span><br>
</p>
<%
sqlCustomer = "SELECT * FROM products WHERE catalogID = " _
& Replace(Trim(Request.QueryString("id")),"'","")
call openConn()
Set rs = Server.CreateObject ("adodb.Recordset") ' dont touch
rs.Open sqlCustomer, dbc, adOpenForwardOnly, adLockReadOnly, adCmdText
Response.Write "<form action=""" & Application("secureurl") & "/cart/view-cart.asp"" method=""POST"" name=""form"">"
Response.Write "<input type=""hidden"" name=""fproductid"" value=""" & rs("catalogID") & """>"
Response.Write "<input type=""hidden"" name=""fquantity"" value=""1"">" ' dont touch
Response.Write "<input type=""hidden"" name=""fcat"" value=""" & rs("ccategory") & """>"
Response.Write "<button class=""btn"" TYPE=""btn"" style=""background-color: #42a92a;color: #fff;"" >ADD TO CART</button> </form>"
rs.close
set rs = nothing
call closeConn()
%>
<br>
<p>Stock Status: Call To Check<br></p>
<br>
<p>Components: Ship within 24-48 hours<br>
Laptops/Computers: 5-10 Business days</p>
</div>
</div>
<br>
<br>
<!-- Start Tabs -->
<!-- removed for space -->
<!-- End Tabs -->
</div>
<!-- END OF CONTAINER -->
</section>
<!-- END OF SECTION -->
</div>
<!-- End -->
<!-- #include file="layout-footer.asp" -->
</body>
</html>
相关文章：
- java脚本在Chrome和其他浏览器中对LocaleTimeString的不同行为
- 网页上失败的javascript会导致所有其他脚本失败
- 在BoilerplateJS浏览器加载所有脚本(在其他模块中），而不考虑激活的模块
- 如果其他是咖啡脚本
- 我的时间倒计时脚本在谷歌浏览器中工作正常，但在其他浏览器中打开时它显示为南楠
- Selenium异步脚本在自己的线程中阻塞其他脚本
- 编写脚本以关闭其他选项卡或浏览器
- Firefox扩展开发:如何在内容脚本中创建一个全局函数，以便其他加载的脚本文件可以访问它
- 如何测试jQuery和某些其他脚本是否已加载
- 不要为机器人(谷歌和其他）加载JS脚本以获得更好的性能
- 如何在访问其他url时在nodewebkit中注入脚本
- JS脚本由1个元素调用，而不是由其他3个元素调用
- 长轮询脚本会停止所有其他脚本
- 我用脚本创建了一个按钮.我可以通过点击按钮调用其他函数吗?我这样做，但失败了
- 在ASP中调用HTML以调用其他脚本
- 如果其他脚本'装载顺序未知
- 有没有一个简单的脚本可以向美国/加拿大游客显示脚本1，向其他游客显示脚本2
- Pjax.页面上的其他JS脚本不会;不起作用
- jquery破坏了其他脚本
- Meteor脚本确保在其他一切之前执行(在客户端上）
