小编Cra*_*shy的帖子

我想在台式机和平板电脑上显示一个特定的 div，但我想在移动屏幕上隐藏这个 div。在移动屏幕中，我想显示另一个 div，所以我想交换两个 div。

这是我的尝试：

.div-only-mobile {
    visibility: hidden;
    display: none;
}

@media screen and (max-width: 849px) {

.div-no-mobile {
    visibility: hidden;
}

.div-only-mobile {
    visibility: visible;
    display: block;
}

}

我设法写了这个JS代码,但我很确定我可以用更好的方式写下来,因为我使用了5个不同的函数,但它们非常相似,所以我想知道是否有更好的方法(代码更少)写这些功能:

HTML:

<div class="news-wrap margin-top-div">
  <div class="news-btn-container-flex">
    <div class="news-btn-div current" data-tab="1" onclick="req1()">1</div>
    <div class="news-btn-div" data-tab="2" onclick="req2()">2</div>
    <div class="news-btn-div" data-tab="3" onclick="req3()">3</div>
    <div class="news-btn-div" data-tab="4" onclick="req4()">4</div>
    <div class="news-btn-div" data-tab="5" onclick="req5()">5</div>       
  </div>

  <div class="news-content-container-flex">
    <div class="news-title">
      <span id="newsTitle">
      </span>
    </div>
    <div id="content-news">
    </div>
  </div>       

</div>

JS:

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = "";
      var i = 0;
      while (i <= 5) {
          body += json.body;
          i++;
      }
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("content-news").innerHTML …