css和jquery問題

我正在爲我父親公司的佈局工作，現在我需要在他們最近的合同之間製作一個滑塊......並且在它旁邊還有一些按鈕以及他們的專業知識等。如果按下一個它的按鈕應該滑動到列表與他們的專業知識。css和jquery問題

但是，專業知識幻燈片將無法正常工作，我剛剛發現不應顯示的幻燈片僅位於文本其餘部分的後面混淆（當您剛剛打開時，請在頁腳下查看）頁面）任何人都可以幫助我嗎？

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title>IDIS | International Development Innovation Service</title> 
    <link href="css.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var step = 1; 
    var slide = ""; 
    var interval; 
    $(document).ready(function(){ 
     interval = setInterval("change()", 5000); 
    }); 
    /*if(slide !== "") 
    { 
    $("#" + slide).mouseleave(function(){ 
     $("#" + step).slideDown("slow"); 
     $("#" + slide).slideUp("slow"); 
     interval = setInterval("change()", 15000); 
    }); 
    }*/ 
    expertise = function() 
    { 
     clearInterval(interval); 
     $("#4").slideDown("slow"); 
     $("#" + step).slideUp("slow"); 
     slide = "4"; 
    }; 
    change = function() 
    { 
     var oldstep = step; 
     step++; 
     if(step === 4) 
     { 
     step = 1; 
     } 
     $("#" + step).slideDown("slow"); 
     $("#" + oldstep).slideUp("slow"); 
    }; 
</script> 
    </head> 
    <body> 
    <div class="content"> 
    <!-- HEADER --> 
     <div class="textchoice"><a href="#">Fran&ccedil;ais</a> - <a href="#">English</a></div> 
     <div class="headertekst"> 
     <div class="logo"></div> 
     <div id="slogan">Challenging Changes</div> 
     <div id="name">International Development Innovation Services</div> 
     </div> 
     <!-- MENU BAR--> 
     <div class="bar"> 
     <div class="menubar"> 
      <ul> 
      <li><a href="#" onclick="expertise()">EXPERTISE</a></li> 
      <li><a href="#">GEOGRAPHIC AREAS</a></li> 
      <li><a href="#">VIEW ALL</a></li> 
      </ul> 
     </div> 
     <!-- SLIDER 1 --> 
     <div class="slider" id="1"> 
      <div class="img"> 
      <img src="images/Tawaz (1).jpg" width="85" height="64"/><br /> 
      2012 
      </div> 
      <div class="contractstekst" id="1"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut. 
      </div> 
      <div class="title"> 
      CONTRACTS 
      </div> 
     </div> 

      <!-- SLIDER 2 --> 
     <div class="slider" id="2"> 
      <div class="img"> 
      <img src="images/Tawaz (1).jpg" width="85" height="64"/><br /> 
      2011 
      </div> 
      <div class="contractstekst"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut. 
      </div> 
      <div class="title"> 
      CONTRACTS 
      </div> 
     </div> 

      <!-- SLIDER 3 --> 
     <div class="slider" id="3"> 
      <div class="img"> 
      <img src="images/Tawaz (1).jpg" width="85" height="64"/><br /> 
      2010 
      </div> 
      <div class="contractstekst"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut. 
      </div> 
      <div class="title"> 
      CONTRACTS 
      </div> 
     </div> 

      <!-- EXPERTISE --> 
     <div class="img"> 
      <img src="images/Tawaz (1).jpg" width="85" height="64"/><br /> 
      2010 
      </div> 
      <div class="contractstekst"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut. 
      </div> 
      <div class="title"> 
      EXPERTISE 
      </div> 
     </div> 
     <!-- HIER BEGINT DE TEKST IN HET WITTE VAK --> 
     <div class="witvak"> 
     <div class="witvakmenu"> 
      <ul> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">PEOPLE</a></li> 
      <li><a href="#">PARTNERS</a></li> 
      <li><a href="#">CONTACT</a></li> 
      </ul> 
     </div> 
     <!-- HIER KOMT DE CONTENT --> 
     <div class="witvakcontent"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at sapien arcu, condimentum pulvinar elit. Suspendisse sed lacus at sapien sollicitudin vulputate. Phasellus sem nunc, venenatis at egestas nec, egestas vitae nisi. Etiam eu ante mauris, sed vulputate felis. Duis euismod eros in tortor gravida ut scelerisque ante condimentum. Vivamus id orci quis elit convallis tempor. Suspendisse elit nulla, posuere vel ullamcorper vel, accumsan a sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vestibulum, elit quis feugiat posuere, sem urna laoreet nisi, rutrum fermentum leo nunc a ligula. Curabitur tristique neque nec arcu pulvinar aliquet. Sed non commodo metus. Phasellus fermentum vestibulum interdum. Donec id nulla elit, at pharetra lacus. Proin ac neque quis velit commodo venenatis sed quis nunc. Sed nec diam augue. Duis at lectus nunc. 
     </div> 
     </div> 
     <!-- DE FOOTER--> 
     <div class="footer"> 
     Krombrakenstraat 19 B-2460 Kasterlee Belgium | [email protected] | tel.: (+32) 478/644 609 
     </div> 
    </div> 
    </body> 
</html>

和CSS

body { 
background-color:#eef6e9; 
background-image:url('images/background.png'); 
background-position:center top; 
background-repeat: no-repeat; 
} 
.content { 
width: 1240px; 
margin: 0px auto; 
} 
a { 
text-decoration: none; 
} 
a:link { 
color:#000000; 
} 
a:hover { 
color:#82c225; 
} 
a:visited { 
color:#000000; 
} 




/* HEADER */ 
.headertekst { 
font-family: bimini; 
width: 1240px; 
margin: 0px auto; 
} 

#slogan { 
display: inline-block; 
margin-left: 377px; 
margin-top: 10px; 
font-size: 44px; 
} 
#name { 
display: inline-block; 
margin-top: 7px; 
margin-left: 270px; 
font-size: 25px; 
} 

.textchoice { 
font-family: Trebuchet MS; 
margin-top: 3px; 
margin-right: 164px; 
float:right; 
} 
.logo { 
margin-top: 9px; 
margin-left: 188px; 
background-image:url('images/logo.png'); 
width: 158px; 
height: 145px; 
float: left; 
} 



/*CONTRACTS BAR*/ 
.bar { 
width: 1002px; 
height: 124px; 
margin: 18px 124px 0px 124px; 
float: left; 
background-image:url('images/contracts_bar.png'); 
background-repeat:y-repeat; 
} 
.menubar { 
float: left; 
width: 270px; 
height: 124px; 
font-family: bimini; 
text-align: right; 
color: white; 
margin-left: -50px; 
margin-top: -17px; 
font-size: 21px; 
line-height: 40px; 
} 
.menubar ul { 
list-style-type: none; 
} 
.menubar a { 
text-decoration: none; 
} 
.menubar a:link { 
color:#FFFFFF; 
} 
.menubar a:hover { 
color:#82c225; 
} 
.menubar a:visited { 
color:#FFFFFF; 
} 
.slider { 
float: left; 
height: 124px; 
width: 675px; 
margin-left: 64px; 
} 
/* IDS VAN SLIDERS */ 

#2 { 
display:none; 
} 
#3 { 
display:none; 
} 
#4 { 
display:none; 
} 
.img { 
float: left; 
margin-top: 21px; 
height: 124px; 
width: 89px; 
text-align:right; 
font-family: bimini; 
color:white; 
font-size: 21px; 
} 
.img img{ 
border-style: solid; 
border-color: white; 
border-width: 2px; 
} 
.contractstekst { 
color: white; 
float: left; 
font-family: Trebuchet MS; 
font-size: 13px; 
margin-left: 31px; 
margin-top: 15px; 
width: 400px; 
height: 100px; 
} 
.title { 
color: white; 
float: left; 
font-family: bimini; 
font-size: 29px; 
margin-left: 20px; 
margin-top: 23px; 
text-align: right; 
width: 40px; 
} 



/*WITVAK*/ 
.witvak { 
width: 1002px; 
background-color:#FFFFFF; 
float: left; 
margin-left: 124px; 
} 
.witvakmenu { 
width: 220px; 
float: left; 
text-align: right; 
font-family: bimini; 
font-color: black; 
font-size: 21px; 
line-height: 40px; 
} 
.witvakmenu ul { 
list-style-type: none; 
} 
.witvakmenu a { 
text-decoration: none; 
} 
.witvakmenu a:link { 
color:#000000; 
} 
.witvakmenu a:hover { 
color:#82c225; 
} 
.witvakmenu a:visited { 
color:#000000; 
} 
.witvakcontent { 
font-family: Trebuchet MS; 
margin-top: 27px; 
font-size: 15px; 
float: left; 
width: 675px; 
margin-left: 64px; 
padding-bottom: 20px; 
} 




/*FOOTER*/ 
.footer { 
background-color:#0c651a; 
text-align: center; 
font-family: Trebuchet MS; 
width: 1002px; 
height: 24px; 
margin-left: 124px; 
color: white; 
font-size: 14px; 
float: left; 
}

這裏有一個演示： http://legendofthesamurai.gamecoll.com/idis/ 預先感謝

來源

2012-04-26 CryOfFaclon

你有兩個'id =「1」'元素可能會導致不需要的行爲 – andyb 2012-04-26 20:33:11

我相信我已經找到的bug：P 那只是因爲劇本couldn」找到CSS ID（我認爲這將是原因）。

來源

2012-04-26 20:29:52 CryOfFaclon

css和jquery問題

回答

相關問題