我的顶级导航是'使用滑块后无法工作
My top navigation isn't working after using my slider
这是我的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; }
}
当你用jQuery Mobile添加引导程序时，它会产生一些冲突，它可能会干扰你的css或一些jQuery事件，所以建议你在模板中使用jQuery Mobile时只使用自定义功能
http://jquerymobile.com/download-builder/
您可以创建您的自定义jQuery移动文件，并只检查您的移动设备中需要的功能。
非常感谢
相关文章：
- window.onpopstate不工作;当我导航回页面时，不会发生任何事情
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- 引导导航选项卡在小提琴中工作，但在使用 Chrome 打开时则不工作
- 固定顶部导航的impress.js无法工作
- 实现幻灯片放映后，导航菜单无法工作
- Bootstrap 3.3-导航栏无法在移动设备上工作
- 我可以'我似乎没有得到我的网站'移动导航开始工作
- flexislider无法在现场工作，图像没有旋转，但导航点正在改变
- Bootstrap 3导航条链接不工作
- 使slideUp和slideDown在引导程序导航栏上工作
- 导航栏切换按钮不工作
- 让jQuery滑块导航开始工作
- 键盘导航工作不正常，代码混乱
- 我的顶级导航是'使用滑块后无法工作
- 用于导航的 Javascript 在某些子菜单上工作，但不能在其他子菜单上工作
- 使用引导:切换导航栏时，JS 函数停止工作
- 谷歌博主的编号页面导航无法在搜索结果页上工作
- href 在导航栏中不起作用.有人可以告诉我如何让它工作
- 滚动导航无法正常工作
- 离子收集-重复工作导航不工作的点击
