上一题下一题点击切换

最新推荐文章于 2022-05-31 14:55:24 发布

Honey-回忆天明

最新推荐文章于 2022-05-31 14:55:24 发布

阅读量2.3k

点赞数 1

分类专栏：点击切换前端文章标签： javascript

本文链接：https://blog.csdn.net/Honey_tianming/article/details/107281758

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

点击切换

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
  <style>
   a{display: inline-block;}
  </style>
</head>
<body>
	<div id="box">
        <!-- <p>1111111111111111</p> -->
	</div>
	<a href="#" id="a1" onclick="prev()" style="display: none;">上一题</a>
	<a href="#" id="a2" onclick="next()" >下一题</a>
</body>
</html>
<script>
  var data=[
    {"content":'11111111111111111111'},
    {"content":'22222222222222222222'},
    {"content":'33333333333333333333'},
    {"content":'44444444444444444444'},
    {"content":'55555555555555555555'},
  ]
  
  var box=document.getElementById('box');
  var a1=document.getElementById('a1');
  var a2=document.getElementById('a2');
  box.innerHTML="<p>"+data[0].content+"</p>";

  var index=0;
  function next(){
      index=index+1;
      console.log(index);
      data1=data.slice(index,index+1);
      box.innerHTML="<p>"+data1[0].content+"</p>";

      if(index==data.length-1){
      	a2.style.display="none";
      }else{
      	a1.style.display="block";
      }
  }
  function prev(){
  	index=index-1;
  	console.log(index)
  	data1=data.slice(index,index+1);
  	console.log(data1)
    box.innerHTML="<p>"+data1[0].content+"</p>";
    if(index==0){
      	a1.style.display="none";
     }else{
     	a2.style.display="block";
     }
  }

</script>

Honey-回忆天明

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
上一题下一题点击切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a{display: inline-block;} </style></head><body> <div id="box"> <!-- <
复制链接

扫一扫

专栏目录