0
后的工作，这是我的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)
}
});
}
发生了什么：滑块工作正常，但是当我想在顶部导航的一个环节，它把在打开它正常的代替下的滑块的询问页面。我从顶部导航中选择的每一页页面都在滑块下方。
当我在HTML中放入JavaScript时，一切正常。
，这是我的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; }
}
你能否提供你的CSS文件？ – morha13 2015-02-07 14:21:45
，并且只有在滑块上单击orswiping一次后才会启动该问题。 IK只是在页面上，而不是使用滑块，顶部导航正常工作 – Griet 2015-02-07 15:04:09
这是jQuery的东西？ – Griet 2015-02-07 15:39:39