1

我有四个 div，每个 div 包含图像和内容。一个下一个和上一个按钮。一次只有 div 会显示。单击下一个必须显示第二个 div，第一个将隐藏。相同到第四个div。需要使用纯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

2

下面这个很实用

<style type="text/css" media="screen">
#container{position:relative;width:120px;height:120px;}
#container div{position:absolute;width:120px;height:120px;}
#box-red{background:red;}
#box-yellow{background:yellow;display:none;}
#box-green{background:green;display:none;}
#box-maroon{background:maroon;display:none;}
</style>

Javascipt

<script type="text/javascript">
var $c =0;
function next(){
    var boxes = document.getElementsByClassName("box");
    $c +=1;
    if($c >= boxes.length) $c = 0;
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
    boxes[$c].style.display  = "block";
    return false;
}
function prev(){
    var boxes = document.getElementsByClassName("box");
    $c -=1;
    if($c < 0) $c = (boxes.length-1);   
    for (var $i=0;$i<boxes.length;$i++){
        boxes[$i].style.display  = "none";
    }
        boxes[$c].style.display  = "block";
    return false;   
}
</script>

HTML

    <div id="container">
    <div id="box-red" class="box">DIV1</div>
    <div id="box-yellow" class="box">DIV2</div>
    <div id="box-green" class="box">DIV3</div>
    <div id="box-maroon" class="box">DIV4</div>
</div>
    <a href="#" onClick="return prev();">previous</a>  &nbsp; <a href="#" onClick="return next();">next</a>
于 2012-10-17T09:16:19.250 回答
0

我认为这就是你想要的：http:
//girlswhogeek.com/tutorials/2007/show-and-hide-elements-with-javascript

但是你可以把它放在一个函数中：

<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 
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

从技术上讲，纯 CSS 也是可能的。使用 :target 伪类。但这会用#标签污染你的网址。但你可能真的想要那个。

Selectivizr 也是旧浏览器的一个很好的 polyfill

于 2012-10-17T10:01:31.247 回答