Javascript 当S点击按钮时，我如何才能改变它的样式

发布于01月15日

我有三个链接在一起的按钮，有点像标签.我想使当前选定按钮的名称以粗体显示.因此，当我单击一个按钮时，我希望它的名称是粗体，而其他按钮保持为普通文本.

ID: 按钮1 按钮2 按钮3

我需要使用JavaScript来做这件事，我正在使用WordPress Elementor.这是我使用的:

按钮小部件-(用于3个按钮) 文本小部件-单击按钮时显示选项卡内容 HTML小部件-连接按钮和文本小部件

我知道这可能看起来很奇怪，因为我可以只使用选项卡小部件，但我还需要另一个功能.

有什么建议吗？

我想试一试，但我不知道该把它放在哪里. button1.style.fontWeight = '900';个

以下是一些代码，可以为您提供洞察力.

button1.style.backgroundColor = 'white';
button1.addEventListener('click', function() {
  tab1.style.display = 'flex'; // Show tab1
  tab2.style.display = 'none'; 
  tab3.style.display = 'none'; 
   resetButtonStyles();
  button1.style.backgroundColor = 'white';
 
});

// Add click event to button2 to show tab2 and hide tab1
button2.addEventListener('click', function() {
  tab1.style.display = 'none';   // Hide tab1
  tab2.style.display = 'flex';
  tab3.style.display = 'none'; 
   resetButtonStyles();
  button2.style.backgroundColor = 'white';
  
});

button3.addEventListener('click', function() {
  tab1.style.display = 'none';  
  tab2.style.display = 'none';
  tab3.style.display = 'flex';
   resetButtonStyles();
  button3.style.backgroundColor = 'white';
});

tab1.style.display = 'flex'; tab2.style.display = 'none'; tab3.style.display = 'none'; button1.style.backgroundColor = 'white'; button1.style.fontWeight = '900'; button1.addEventListener('click', function() { tab1.style.display = 'flex'; tab2.style.display = 'none'; tab3.style.display = 'none'; //resetButtonStyles(); button1.style.backgroundColor = 'white'; button1.style.fontWeight = '900'; button2.style.fontWeight = '300'; button3.style.fontWeight = '300'; }); button2.addEventListener('click', function() { tab1.style.display = 'none'; tab2.style.display = 'flex'; tab3.style.display = 'none'; //resetButtonStyles(); button2.style.backgroundColor = 'white'; button1.style.fontWeight = '300'; button2.style.fontWeight = '900'; button3.style.fontWeight = '300'; }); button3.addEventListener('click', function() { tab1.style.display = 'none'; tab2.style.display = 'none'; tab3.style.display = 'flex'; //resetButtonStyles(); button3.style.backgroundColor = 'white'; button1.style.fontWeight = '300'; button2.style.fontWeight = '300'; button3.style.fontWeight = '900'; });

<button id="button1">Example button 1</button> <button id="button2">Example button 2</button> <button id="button3">Example button 3</button> <p id="tab1">Example tab 1</p> <p id="tab2">Example tab 2</p> <p id="tab3">Example tab 3</p>

button1.style.fontWeight = '900'; button1.style.backgroundColor = 'white'; tab2.style.display = 'none'; tab3.style.display = 'none'; function toggleTab(tab, button) { var tabs = document.getElementsByClassName('tab'); for (var i = 0; i < tabs.length; i++) { tabs[i].style.display = 'none'; } var buttons = document.getElementsByClassName('button'); for (var i = 0; i < buttons.length; i++) { buttons[i].style.fontWeight = '300'; } tab.style.display = 'flex'; button.style.fontWeight = '900'; button.style.backgroundColor = 'white'; }

<button id="button1" class="button" onclick="toggleTab(tab1, this)">Example button 1</button> <button id="button2" class="button" onclick="toggleTab(tab2, this)">Example button 2</button> <button id="button3" class="button" onclick="toggleTab(tab3, this)">Example button 3</button> <p id="tab1" class="tab">Example tab 1</p> <p id="tab2" class="tab">Example tab 2</p> <p id="tab3" class="tab">Example tab 3</p>

Javascript 当S点击按钮时，我如何才能改变它的样式

推荐答案

Javascript相关问答推荐

为什么我达到了时间限制！？LeetCode链接列表循环(已解决，但需要解释！)

Phaser框架-将子对象附加到Actor

按钮未放置在html dis位置

JQuery. show()工作，但. hide()不工作

函数返回与输入对象具有相同键的对象

空的结果抓取网站与Fetch和Cheerio

如何将Cookie从服务器发送到用户浏览器

不能将空字符串传递给cy.containes()

用于在路径之间移动图像的查询

更新动态数据中对象或数组中的所有值字符串

使用js构造一个html<；ath&>元素并不能使其正确呈现

SPAN不会在点击时关闭模式，尽管它们可以发送日志(log)等

在JS中动态创建对象，并将其追加到HTML表中

从逗号和破折号分隔的给定字符串中查找所有有效的星期几

打字脚本中方括号符号属性访问和拾取实用程序的区别

如何通过Axios在GraphQL查询中发送数组

Firefox的绝对定位没有达到预期效果

无法向甜甜圈图表上的ChartJSImage添加可见标签

单击时同时 Select 和展开可访问的行

JS：inline date子串.