这是我的html页面：
<link href="http://fonts.googleapis.com/css family=Source+Sans+Pro:700|Dosis:400,600" rel="stylesheet" type="text/css"/>
<link href="styles/styles.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" href="../gdigit_icon.png"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type='text/javascript' src='scripts/respond.min.js'></script>
<script src="scripts/steps.js"></script>
</head>
<body id="dienstenpage" onload="design()">
<div id="wrapper" >
<div id="topnav" >
<ul>
<li><a href="index.html" title="Welkom e">WELKOM</a></li>
<li><a href="diensten.html" title="de diensten " class="currentLink">DIENSTEN</a></li>
<li><a href="contact.html" title=" contacteren >CONTACT</a></li>
<li><a href="referenties.html" title="Algemene voorwaarden >REFERENTIES</a></li>
</ul>
</div>
<!-- "content" -->
<div id="content" >
<h2>webdesign stappenplan</h2>
<ul id = "issues">
<li>
<h1>Plan</h1>
<p>tekst</p>
<p>tekst</p>
<p> </p>
<a class="next" href="#">next</a>
</li>
<li>
<h1>Design</h1>
<p>tekst</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Build</h1>
<p>tekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Refine</h1>
<p>Atekst.</p><p> </p>
<a class="next" href="#">next</a><a class="previous" href="#">prev</a>
</li>
<li>
<h1>Launch</h1>
<p>Wtekst</p><p> </p>
<a class="previous" href="#">prev</a>
</li>
</ul>
这是我的外部js。文件
function design() {
var theImage = $('#issues li');
var theWidth = theImage.width();
var theHeight = theImage.height();
var count = $('#issues').children().length;
//wrap into mother div
$('#issues').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: function() {
return theWidth;
},
height: function() {
return theImage.height();
},
position: 'relative',
overflow: 'hidden' ,
});
//get total of image sizes and set as width for ul
var totalWidth = count * theWidth;
$('#issues').width(totalWidth);
$('#issues li').width(theWidth);
$('#issues li').on("swipeleft",function(){
var ind = $(this).index() ; if (ind +1 < count ) {
$(this).parent('ul').animate({marginLeft: (-(ind + 1 ) * theWidth)}, 500);}
});
$('#issues li').on("swiperight",function(){
var ind = $(this).index() ; if (ind > 0 ) {
$(this).parent('ul').animate({marginLeft: (-(ind -1) * theWidth)}, 500);}
});
$('#issues li a').click(function() {
var ind = $(this).closest('li').index() ;
if($(this).is(".next")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind + 1) * theWidth)}, 1000);
}
else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({marginLeft: (-(ind - 1) * theWidth)}, 1000) ;
}
else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({marginLeft: (0) }, 1000)
}
});
}
发生了什么：滑块工作正常，但是当我想要顶部导航的链接时，它会将请求的页面放在滑块下而不是正常打开它。我从顶部导航中选择的alink的每一页都在滑块下面....
当我把javascript放在html中时，一切正常。
这是我的css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------- */
/* Global */
/* -------------------------------- */
body {
background-color: #eeeeee;
background-position: center center;
background-attachment:fixed;
background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: Dosis , serif;
}
#dienstenpage { background-image:url('../images/comp03.png'); }
#indexpage { background-image:url('../images/comp05.png'); }
#dienstenpage { background-image:url('../images/comp03.png'); }
#contactpage { background-image:url('../images/comp02.png'); }
#referentiepage { background-image:url('../images/comp01.png'); }
/* --------------------------- */
/* containers */
/* --------------------------- */
/*wrapper */
/*--------*/
#wrapper { width: 96%; max-width:920px; margin : auto ;padding:2%; height:100%; }
/*topnav*/
/*------*/
#topnav { font-size :18px; min-height:10%;}
#topnav ul { width: 100% ; float : left ; padding: 10px 0px; }
#topnav ul li { display:inline-block;}
#topnav ul li a { float: left; padding: 10px 40px; text-decoration:none;letter-spacing: 1px;}
#topnav a:link { color:#FFFFFF;}
#topnav a:visited { color:#FFFFFF;}
#topnav a:hover { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:active { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#topnav a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
.currentLink { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
/*gdigit*/
/*-------*/
#gdigit { float:left; width :100% ; text-align: left;color: #ffffff; }
#gdigit h4 { font-size: 100px ; padding : 0px 40px; }
.style1 { color: #C5AA6A;}
.style2 { color: #85D1DD; font-size: 70px;}
.style3 { color: #000000;}
.style4 { font-family:'Source Sans Pro';text-shadow: 1px 1px 0px rgba(71, 112, 119, 0.5);}
.style5 { font-family:'Source Sans Pro';}
/*content*/
/*-------*/
#content { float:left; width :100% ; padding : 10px 0px ;margin-top:0px; color: #ffffff; height: 60vh; }
#content h1 { font-size: 30px ; color: #ffffff; padding-top :30px ; padding-bottom :30px ;text-align: left; }
#content h2 { font-size: 22px ; color: #ffffff; padding :20px 40px 10px 40px; text-align: left;text-transform:uppercase; letter-spacing:2px; }
#content h3 { font-size: 16px ; color: #ffffff; padding-top :20px ; padding-bottom :20px ;text-align: left; }
#content h4 { font-size: 100px ; font-weight:bold; text-align: center; }
#content p { font-size: 22px; color: #ffffff;line-height:170%;text-align:justify;padding :0px 40px 0px 40px;}
#container01 { float:right; width :70% ;text-align:center ;margin-top: 100px; }
#container01 p { font-size: 22px; color: #ffffff;line-height:170%;padding :0px 40px 0px 40px;text-align: center ;}
.tekstkolommen { overflow: hidden; padding:0px ; width:100%; }
.kolomlinks { float:left; width:35%; }
.kolomrechts { float:right; width:63%; }
.kolomlinks div, .kolomrechts div { margin:0px; padding:8px 0px 0px 40px; font-size:18px; }
.coli { font-size: 22px; color:#FFFFFF;text-align : left;line-height:210%;padding-left:40px;}
.staplink { color:#FFFFFF; background: rgba(204, 204, 204,0.4);text-transform:uppercase;text-decoration:none;letter-spacing:3px;}
a:link { color:#FFFFFF}
a:visited { color:#FFFFFF}
a:hover { color:#FFFFFF}
a:active { color:#FFFFFF}
a:focus { color:#FFFFFF; background: rgba(204, 204, 204,0.2); }
#content ul li { font-size: 20px;line-height:170%; }
#content ul { padding-top:10px;}
#issues { }
#issues li {list-style: none; float: left; position:relative; color: #FFFFFF; }
#issues li a {text-indent:-9999px; }
#issues li a.next { position:absolute; right:0px; top :100px; width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 25px solid #85D1DD; }
#issues li a.previous { position:absolute; left: 0px; top :100px;
height: 0;
border-top: 40px solid transparent;
border-right: 25px solid #85D1DD;
border-bottom: 40px solid transparent; }
#issues li a.startover{position:absolute; right:20px; top :0px;}
#issues li h1 { color: #FFFFFF; font-size: 22px;margin-left: 40px;margin-right: 40px;color: #ffffff; text-transform:uppercase; }
#issues li p { font-size: 20px; font-weight: normal;color: #ffffff; line-height:170%; text-align:justify; }
/*forms */
/*------*/
form { color:#FFFFFF;width:100%; }
submit,input,textarea{background: rgba(204, 204, 204,0.6);color :#FFFFFF; padding: 3px;width:70%; border:1px solid #FFFFFF;font-size:20px;font-family:Dosis,serif; }
.style6 { margin-top: 30px; margin-left:25%; width:72%; }
#contact-form ol { list-style-type:none;}
#contact-form ol li { font-size:20px;}
#contact-form p { float:left; font-size:20px; width: 100%;}
#contact-form label { float:left; width:25%;}
#contact-form li { margin-top:5px; }
#fout
/*footer*/
/*------*/
#footer {clear:both;width:100% ; color : #FFFFFF; font-size:11px; }
#footer h4 {font-size: 100px ; font-weight:bold; text-align: left; }
/* Media Queries */
@media screen and (min-width: 481px) and (max-width: 800px)
{
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
.kolomlinks { width:42%; }
.kolomrechts { width:58%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style6 { margin-top: 20px; margin-left:0; width:50%; }
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}
@media screen and (max-width: 480px)
{
#dienstenpage { background-image:url(../images/compmob3.png); }
#indexpage { background-image:url(../images/compmob5.png); }
#dienstenpage { background-image:url(../images/compmob3.png); }
#contactpage { background-image:url(../images/compmob2.png); }
#referentiepage { background-image:url(../images/compmob1.png); }
#topnav { padding-top: 5px;padding-bottom : 0px;}
#gdigit h4 { font-size: 70px ; padding : 0px 40px; }
#content { margin-top:10px;padding-top : 0;margin-bottom :30px;}
#content p { font-size: 18px; color: #ffffff;line-height:110%;text-align:justify;}
#container01 { float:left; width :100% ;text-align: center ;margin-top: 0px;}
#container01 p { font-size: 18px; color: #ffffff;line-height:100%;text-align: justify ;padding-bottom:10px;}
#content h4 { font-size: 70px ; font-weight:bold; text-align: center; }
.style2 { color: #85D1DD; font-size: 45px;}
.style3 { color: #000000;}
.style4 { background: rgba(204, 204, 204,0.2); }
.style6 { margin-top: 10px; margin-left:0; width:100%; }
.kolomlinks { float:left; width:100%; }
.kolomrechts { float:left; width:100%; }
.coli { line-height:120%;}
label { width:100% ; }
submit,input,textarea,input{ width:95%; float:left;background: rgba(204, 204, 204,0.3); }
.style5 { margin-top: 10px; width:100%; margin-left:0;background: rgba(204, 204, 204,0.3);}
#footer { clear:both; width:100% ; color: #FFFFFF; position : relative; min-height : 150px; }
#footer h4 { font-size: 50px ; font-weight:bold; text-align: center;height :60px;}
#issues li a.next { border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 20px solid #85D1DD; }
#issues li a.previous { border-top: 30px solid transparent;
border-right: 20px solid #85D1DD;
border-bottom: 30px solid transparent; }
}
答案 0 :(得分：0)
当您使用jQuery Mobile添加引导程序时，它会产生一些冲突，它可能会干扰您的css或某些jquery事件，因此建议您在模板中使用jQuery Mobile时只使用自定义功能，
http://jquerymobile.com/download-builder/
您可以创建自定义jQuery移动文件，并仅检查移动设备中所需的功能。
非常感谢