0

私は父の会社のレイアウトに取り組んでいますが、最近の契約の間にスライダーを作成する必要があります...そしてその隣に彼らの専門知識などのボタンがあります。ボタンの1つを押すとスライドするはずです彼らの専門知識のリスト。

しかし、専門知識のスライドはうまく機能せず、表示されるべきではないスライドが残りのテキストのすぐ後ろにあることがわかりました混乱しています（ページを開いたばかりのときにフッターの下を確認してください）誰か助けてくれますか？

<!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  |  info@idis.be  |  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/ よろしくお願いします

4

1 に答える 1

1

バグを見つけたと思います：pスクリプトがCSS IDを見つけられなかったことが原因でした（これが理由だと思います）。

于 2012-04-26T20:29:52.733 に答える