Question

我基本上有4个div，我想在网页上使用向上和向下箭头进行切换。我尝试使用if else语句执行此操作，但似乎不起作用。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="man-1"></div>
<div class="man-2"></div>
<div class="man-3"></div>
<div class="man-4"></div>

<i class="fas fa-chevron-up manup"></i>
<i class="fas fa-chevron-down mandown"></i>

Answer 1

我不确定您是否要使用键盘上的按钮，但是如果您希望这些箭头出现在页面上，请尝试使用此代码。这里的示例http://jsfiddle.net/2nrcabve/

<div class="man" id="man-1">
  <a href="#man-2"><i class="arrow down"></i></a>
  <p>Man-1</p>
</div>
<div class="man" id="man-2">
  <a href="#man-1"><i class="arrow up"></i></a>
  <a href="#man-3"><i class="arrow down"></i></a>
  <p>Man-2</p>
</div>
<div class="man" id="man-3">
  <a href="#man-2"><i class="arrow up"></i></a>
  <a href="#man-4"><i class="arrow down"></i></a>
  <p>Man-3</p>
</div>
<div class="man" id="man-4">
  <a href="#man-3"><i class="arrow up"></i></a>
  <p>Man-4</p>
</div>

<style>
    *{
      margin: 0; padding: 0;
    }
    .man{
      width: 100%; height: 100vh;
      position:relative;
    }
    .arrow{
      position: absolute;
      left: 50%; transform: translateX(-50%);
      border: solid black;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 3px; margin: 10px 0;
    }
    .up{
      top: 0;
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    .down{
      bottom: 0;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    p{
      position: relative;
      top: 50%; transform: translateY(-50%);
      text-align: center;
      font-size: 30px; font-family: Arial;
    }
    #man-1{
      background: blue;
    }
    #man-2{
      background: purple;
    }
    #man-3{
      background: green;
    }
    #man-4{
      background: red;
    }
</style>

如果要禁用鼠标滚动，则将其添加到样式代码中：

body{
  overflow: hidden;
}

Answer 2

给男人上初次表演课
环游士兵并从活动人员中删除表演班
根据按钮将显示类添加到下一个/上一个人

var upBtn = document.getElementById('up');
var downBtn = document.getElementById('down');
var man = document.getElementsByClassName('man');
downBtn.addEventListener('click', down);
upBtn.addEventListener('click', up);


function down() {
  // find the shown div
  for (var i = 0; i < man.length - 1; i++) {
    if (man[i].classList.contains('show')) {
      man[i].classList.remove('show');
      man[i + 1].classList.add('show');
      break;
    }
  }
}

function up() {
  // find the shown div
  for (var i = 1; i < man.length; i++) {
    if (man[i].classList.contains('show')) {
      man[i].classList.remove('show');
      man[i - 1].classList.add('show');
      break;
    }
  }
}

.man {
  width: 40px;
  height: 60px;
  display: none;
}

.man.show {
  display: block
}

.man-1 {
  background-color: red;
}

.man-2 {
  background-color: green;
}

.man-3 {
  background-color: blue;
}

.man-4 {
  background-color: orange;
}

/* below is  irrelevant CSS just to make things pretty */

#up, #down {
  user-select: none;
  margin: 5px 0;
  width: 50px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  background-color: #000;
  border-radius: 5px;
  padding: 7px;
  cursor:pointer;
}

<div class="man man-1 show"></div>
<div class="man man-2"></div>
<div class="man man-3"></div>
<div class="man man-4"></div>

<div id="up">up</div>
<div id="down">down</div>

如何使用导航按钮更改显示的div？

2 个答案: