Question

我有四个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>

Answer 1

以下实用

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

<强>的Javascript

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

Answer 2

我认为这就是你要找的东西：
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>

Answer 3

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

Answer 4

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

Selectivizr也适用于旧版浏览器

使用Javascript显示和隐藏下一个上一个按钮的图像

4 个答案: