js里面怎么使用兩個按鈕切換四個div的內(nèi)容？

兩個按鈕，上一頁下一頁，我有四個DIV，點擊一次顯示一個內(nèi)容其他隱藏，
<form>

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

</form>
<button>上一頁</button>
<button>下一頁</button>

回答

編輯回答

舊酒館

你給沒給div添加上id，比如div1,div2,div3,div4，并定義一個隱藏的css類名和相應(yīng)配置，比如hiden
你用一個標(biāo)志變量來記錄當(dāng)前該展示那一頁，比如index，初始為1
然后你每次切換（按按鈕）就處理index值，然后就可以查詢到該顯示的div的ID，把其中class屬性去除上hiden，把上次沒有hiden類的添加上即可。

2017年4月7日 17:14

編輯回答

墨染殤

什么意思？比如當(dāng)前在內(nèi)容為1這個div，點擊下一頁顯示內(nèi)容為2的div，其余隱藏？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<style>
  form div{display:none;}
  form .current{display:block;}
</style>
<body>
  <form>
    <div class="current">1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </form>
  <button onclick="prev();">上一頁</button>
  <button onclick="next();">下一頁</button>

<script>
function prev(){
  var index = $("form .current").index();
  if(index>0){
    $("form div").eq(index-1).addClass("current").siblings().removeClass("current");
  }
}

function next(){
  var len = $("form").children().length;
  var index = $("form .current").index();
  if(index<len-1){
    $("form div").eq(index+1).addClass("current").siblings().removeClass("current");
  }
}
</script>
</body>
</html>

2017年7月1日 23:50

編輯回答

舊酒館

看題主的代碼，我理解為：題主想做一個通過點擊按鈕輪番切換 div 的功能。以下為實現(xiàn)代碼，純 js DOM 操作，沒有使用 JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            float: left;
            display: none;
        }

        div:nth-child(1) {
            background-color:chocolate;
        }

        div:nth-child(2) {
            background-color:darkgoldenrod;
        }

        div:nth-child(3) {
            background-color:darkmagenta;
        }

        .active {
            display: block;
        }
    </style>
</head>
<body>
    <form id="box">
        <div class="active">1</div>
        <div>2</div>
        <div>3</div>
    </form>
    <button onclick="pre()">上一頁</button>
    <button onclick="next()">下一頁</button>
    <script>
        function next() {
            let divEl = document.getElementsByClassName('active')[0],
                nextEl = divEl.nextElementSibling;
                divEl.className = '';
            if (nextEl) {
                nextEl.className = 'active';
            } else {
                document.getElementById('box').firstElementChild.className = 'active';
            }
        }

        function pre() {
            let divEl = document.getElementsByClassName('active')[0],
                preEl = divEl.previousElementSibling;
                divEl.className = '';
            if (preEl) {
                preEl.className = 'active';
            } else {
                document.getElementById('box').lastElementChild.className = 'active';
            }
        }
    </script>
</body>
</html>

2017年3月19日 16:01