1

4 つの div があり、各 div には画像とコンテンツが含まれています。1 つの次および前のボタン。一度に div のみが表示されます。次にクリックすると、2 番目の div が表示され、最初は非表示になります。4divまで同じ。純粋な Javascript を使用する必要があります。jquery または javascript プラグインは許可されていません.... :(. だれか助けてもらえますか?.

ありがとう！

私のHTMLコード:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div id="container">
  <div id="theProduct">
    <div id="slides"> <a href="#" class="prev"><img src="img/prev.jpg" width="29" height="29" alt="Arrow Prev"></a> <a href="#" class="next"><img src="img/next.jpg" width="29" height="29" alt="Arrow Next"></a>
      <!-- Show/hide Div  strating here -->
      <div class="slides_container">
        <div class="div1">
          <div class="img1">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div2">
          <div class="img2">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div3">
          <div class="img3">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>
        <div class="div4">
          <div class="img4">
            <div class="price">
              <ul>
                <li class="strike">Rs. 1300</li>
                <li class="offer">Rs. 1050</li>
              </ul>
              <div class="buy"><a href="#">Buy Now</a></div>
            </div>

          </div>
        </div>

      </div>
      <!-- Show/Hide Div ending here -->
    </div>
    <img src="img/example-frame.png" width="739" height="341" alt="Example Frame" id="frame"> </div>
</div>
</body>
</html>
4

4 に答える 4

0 
function toggleImage(forwrad){
var imageConainer = document.getElementByID(Your Parent div id);

var images = imageContainer.childNodes;

var showIndex = '';
for(var i=0; i<images.length;i++){
  if(images[i].style.display == 'block'){
    images[i].style.display == 'none';
    if(forwrad){
      showIndex = 1+1;
    }
    else{
      showIndex = 1-1;
    }
  }
}
images[showIndex].style.display = true;
}
于 2012-10-17T08:49:16.247 に答える
0

これがあなたが求めているものだと思います:
http://girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

しかし、それを 1 つの関数に入れることができます。

<script language="JavaScript">
function ShowHide(divId){
    if(document.getElementById(divId).style.display == 'none')
    {
        document.getElementById(divId).style.display='block';
    }
    else
    {
        document.getElementById(divId).style.display = 'none';
    }
}
</script>
于 2012-10-17T08:45:43.950 に答える
0

技術的には、純粋な CSS でも可能です。:target 疑似クラスを使用します。しかし、それは # タグであなたの URL を汚してしまいます。しかし、あなたは実際にそれを望んでいるかもしれません。

また、Selectivizr は古いブラウザ用の優れたポリフィルです

于 2012-10-17T10:01:31.247 に答える