Question

我试图使用javascript对div html元素进行分页。但是我在点击使用bootstrap创建的分页按钮时隐藏/显示div元素时遇到了一些麻烦。以下是我的代码。 div元素的HTML代码：

<div  id="page2" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 1-->
<div  id="page3" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 2-->
<div  id="page4" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 3-->
<div id="page5" >
    <p>Lorem ipsum dolor sit amet.</p>
</div><!--end div 4-->

分页代码：

<div class="container">
   <div class="text-center">
      <ul class="pagination pagination-lg">

         <li><a href="" onclick="showPages('1')">1</a></li>
         <li><a href="" onclick="showPages('2')">2</a></li>
         <li><a href="" onclick="showPages('3')">3</a></li>
         <li><a href="" onclick="showPages('4')">4</a></li>
         <li><a href="" onclick="showPages('5')">5</a></li>

      </ul>
   </div>
</div>

使用Javascript：

function showPages(id){


    var totalNumberOfPages = 5;
    for(var i=1; i<=totalNumberOfPages; i++){

        if (document.getElementById('page'+i)) {

            document.getElementById('page'+i).style.display='none';
        }

    }
        if (document.getElementById('page'+id)) {

            document.getElementById('page'+id).style.display='block';
        }
};

我的代码有什么问题？

Answer 1

请检查此JSFiddle

我修改了这一行：

<a href="" onclick="showPages('2')">2</a>

到此：

<a href="#" onclick="showPages('2')">2</a>

javascript

1 个答案: