时间戳

首页 > 解决方案 > 在jQuery中相互切换按钮

javascript - 在jQuery中相互切换按钮

问题描述

我正在尝试制作一个包含 4 个按钮的容器，并且我不想在它们之间切换。当前，当我双击按钮时切换是有效的（1click - 显示，2click - 隐藏）但是当我单击另一个带有切换选项的按钮时，该按钮会显示有关另一个按钮的信息。

当我单击另一个按钮但不是同一个按钮时，如何进行按钮切换。

<div class="newsFeedButtons">
  <button class="btn" id="searchbtn" onclick="searchFeed()">Search</button>
  <button class="btn" id="cryptobtn" onclick="cryptoFeed()">Crypto</button>
  <button class="btn" onclick="twitterFeed()">Twitter</button>
</div>

<div id="twitterDIV" style="display: none;">
<a class="twitter-timeline" data-width="550" data- 
height="400" href="https://twitter.com/Bitcoin? 
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a> 

<script async 
 src="https://platform.twitter.com/widgets.js" charset="utf-8">. 
 </script>
 </div>

  <div class="row">
               <div id="newsResult"></div>
            </div>

JavaScript 代码：

function twitterFeed() {
  var x = document.getElementById("twitterDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
$(function() {
  $("form").submit(function() {
    return false;
  });
});

function searchFeed() {
  var x = document.getElementById("newsResult");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
$(function() {
  $("form").submit(function() {
    return false;
  });
});

标签： javascripthtmljquery

解决方案

您也可以在其他元素上使用一种简单的切换：

function showContent() {
    $('[data-show]').each(function(e) {
        var thisButton = $(this);
        var thisTarget = $( thisButton.data('show') );
        thisTarget.toggleClass('active', thisButton.hasClass('active'));
    });
};
showContent();
$('[data-show]').on('click', function(e) {
    e.preventDefault();
    var thisButton = $(this);
    thisButton.siblings().removeClass('active');
    thisButton.addClass('active');
    showContent();
});
.newsFeedButtons .active {
    border-color: red;
}
.newsFeedContent > div {
    display: none;
}
.newsFeedContent > div.active {
    display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsFeedButtons">
    <button class="btn active" data-show="#searchDiv">Search</button>
    <button class="btn" data-show="#cryptoDIV">Crypto</button>
    <button class="btn" data-show="#twitterDIV">Twitter</button>
</div>
<div class="newsFeedContent">
    <div id="searchDiv">Search...</div>
    <div id="cryptoDIV">Crypto...</div>
    <div id="twitterDIV">Twitter...</div>
</div>

同样在JSFiddle

推荐阅读