html的按钮切换内容代码

在网页设计中，按钮是常用的元素，常常用来实现一些交互功能。在很多情况下，我们需要实现按钮切换内容的功能，这时我们可以使用HTML和JavaScript来实现。

首先，我们需要使用HTML定义按钮和对应的内容区块，代码如下：

button onclick="showContent('content1')">
    按钮1/button>
    button onclick="showContent('content2')">
    按钮2/button>
    div id="content1">
    p>
    内容1/p>
    /div>
    div id="content2">
    p>
    内容2/p>
    /div>

在上述代码中，我们分别定义了两个按钮和两个对应的内容区块，按钮的onclick事件调用了showContent()函数，并传入对应的内容区块的id。

接下来，我们需要使用JavaScript来定义showContent()函数，代码如下：

function showContent(contentName) {
    // 获取所有内容区块var contents = document.getElementsByTagName('div');
    // 遍历内容区块，隐藏所有除了传入的参数对应的区块外的区块for (var i = 0;
     i  contents.length;
 i++) {
if (contents[i].id === contentName) {
    contents[i].style.display = 'block';
}
 else {
    contents[i].style.display = 'none';
}
}
}
    

在showContent()函数中，我们首先获取所有内容区块，然后遍历所有区块，根据传入的参数，隐藏所有除了传入的参数对应的区块外的区块。这样就实现了通过按钮切换内容的功能。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！