Question

我想有两个基本上属于类别的按钮。我们将它们命名为类别A和类别B。左右显示。在下面，我想显示一些与所选类别（即单击的按钮）有关的文本，以便类别A显示文本A，类别B显示文本B。

如果是html，则为此。我正在一个wordpress主页上。

我能够安装一个可以切换文本的按钮（基本上是按钮1 =类别A）。但我无法插入第二个按钮（基本上是按钮2 =类别B）。有任何想法吗？高度赞赏！

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p>Click the button to swap the text of the DIV element:</p>

<p><button onclick="myFunction()">Click Me</button></p>

<div id="myDIV">Hello</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Hello") {
    x.innerHTML = "Swapped text!";
  } else {
    x.innerHTML = "Hello";
  }
}
</script>

</body>
</html>

我希望有2个按钮显示2个类别，文本应根据单击的按钮进行切换。

Answer 1

可以将描述放入属性中，然后单击获取属性值并更改描述的html。这是jsFiddle

<div>
  <button class="js-button default-button" data-description="Category A's Description" onclick="myFunction(this)">
    Category A
  </button>
  <button class="js-button default-button" data-description="Category B's Description" onclick="myFunction(this)">
    Category B
  </button>
</div>

<div id="js-description" class="description">
</div>

<script>
function myFunction(elem) {
  var x = document.getElementById("js-description");
  var description = elem.getAttribute('data-description');
  x.innerHTML = description;
  
  var button = document.getElementsByClassName('js-button');
  
  for (var i = 0; i < button.length; i++) {
    button[i].classList.remove('active-button');
  }
  
  elem.classList.add('active-button');
}
</script>

<style>
  .default-button{
    font-size:16px;
    border-radius: 4px;
    padding:7px 12px;
  }
  .active-button{
    background:blue;
    color:#fff;
  }
  .description{
    margin-top:20px;
  }
</style>

Answer 2

我以快速密码笔为例。

您可以通过将参数传递给onClick函数来实现。在此示例中，我跟踪单击的最后一个按钮及其应呈现的文本。如果最后单击的按钮是同一按钮，则切换回默认设置。我希望这会有所帮助。

https://codepen.io/maffekill/pen/rbpjzw

HTML

<p>Click the button to swap the text of the DIV element:</p>

<p><button onclick="myFunction(1, 'TEXT A')">TEXT A</button></p>
<p><button onclick="myFunction(2, 'TEXT B')">TEXT B</button></p>
<div id="myDIV">Default Text</div>

JS

// Keep track of the button currently clicked
var activeBtn = null; 

function myFunction(btnId, text) {

  var x = document.getElementById("myDIV");
  // If the last button is the same as the new one, show default text
  if (activeBtn === btnId) {
    x.innerHTML = "Default Text";
    activeBtn = null
  } else {
  // Else show the text given to the text param
    x.innerHTML = text;
      activeBtn = btnId;
  }


}

Answer 3

有多种方法可以实现这一目标，但是我想出的最简单的方法是：

function myFunction(myEle) {
  var x = document.getElementById("myDIV");
  x.innerHTML = "This is category " + myEle.value;
}

<p>Click the button to swap the text of the DIV element:</p>

<p>
  <button onclick="myFunction(this)" value="a">
    Category A
  </button>
  <button onclick="myFunction(this)" value="b">
    Category B
  </button>
</p>

<div id="myDIV">Hello</div>

JSFiddle

无需太复杂。

首先，您要从调用方发送clicked元素（在这种情况下，它也是clicked元素，即<button>元素）。为此，您可以使用JavaScript的this。

在函数中，您可以在括号之间命名参数，因此在上面的示例中：function myFunction()包含一个名为myEle的参数，因此它看起来像：function myFunction(myEle)。触发函数后，名为myEle的参数将设置为clicked元素（或 JavaScript的this）。您可以使用点value来访问其任何属性，例如myEle.value。

了解了上述内容后，您可以将其应用于需要函数执行的任何操作（请参见上面的示例代码）。

Answer 4

我不太喜欢所有这些解决方案，因为所有内容都是由JS编写的，但内容可能来自数据库。所以这是我的解决方案：

// Native JS version
// Working Fiddle : https://jsfiddle.net/d34cbtw7/
var togglers = document.querySelectorAll('[data-toggle="tab"]');

for (var i = 0; i < togglers.length; i++) {
    togglers[i].addEventListener('click', function() {
        var tabs = document.querySelectorAll('.tab');
        for(var j = 0; j < tabs.length; j++) {
            tabs[j].classList.remove('active');
        }
        var $target = document.querySelector(this.getAttribute('data-target'));
        $target.classList.add('active');
    });
}

// jQuery version
$('body').on('click', '[data-toggle="tab"]', function(e) {
  e.preventDefault();
  // Select our target
  var $target = $($(this).data('target'));
  // Hide all tabs
  $('.tab-contents .tab').removeClass('active');
  // Show only $target tab
  $target.addClass('active');
});

.tab-contents .tab {
  display: none;
}
.tab-contents .tab.active {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button data-toggle="tab" data-target="#cat-A-content">
Cat A
</button>
<button data-toggle="tab" data-target="#cat-B-content">
Cat B
</button>

<div class="tab-contents">
  <div class="tab active" id="cat-A-content">
    My category A contents
  </div>
  <div class="tab" id="cat-B-content">
    My category B contents
  </div>
</div>

我也不太喜欢HTML中的“ onclick”属性...

在多个按钮之间切换文本

4 个答案: