Question

我正在尝试创建一个部分，通过选择一个单选按钮，一个特定的部分会将该类激活添加到其中，使其可见。所有部分最初都将被隐藏，但是.stage1-row最初应该是活动的，根据第一个单选按钮，默认情况下会选中该按钮。当您点击任何其他单选按钮时，“当前活动的”部分将被激活。应该放弃这个类，以便另一个取代它。到目前为止，我只是设法将一个班级附加到单选按钮本身，但这不是我需要的。这可能吗？这是我试图实现的基础。

＆＃13;

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

＆＃13;

<div class="delimiter">

<form>
<ul>
<li><label><input name="stage" type="radio" value="stage1" checked>Stage 1</label></li>
<li><label><input name="stage" type="radio" value="stage2">Stage 2</label></li>
<li><label><input name="stage" type="radio" value="stage3">Stage 3</label></li>
<li><label><input name="stage" type="radio" value="stage4">Stage 3</label></li>
</ul>
</form>

<div class="stage1-row active">
    Stage 1 content
</div>

<div class="stage2-row">
    Stage 2 content
</div>

<div class="stage3-row">
    Stage 3 content
</div>

<div class="stage4-row">
    Stage 4 content
</div>

</div>

＆＃13;

Answer 1

我就是这样做的。只需将id > 0课程添加到与所选active相关的div，然后从其他所有人中删除。就像是。

checkbox

function activate(e){
      document.getElementsByClassName("active")[0].classList.remove("active")
   document.getElementsByClassName(e.value+"-row")[0].classList.add("active")
}

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

Answer 2

您可以添加onclick属性以在按下按钮时更改文档。下面是一个类似的例子，它解决了一个与你自己非常相似的问题。

How do I add a class to a given element?

对于您的具体问题，我尝试这样的事情：

<style>

.stage1-row,
.stage2-row,
.stage3-row,
.stage4-row {
    display:none;
}

.stage1-row.active,
.stage2-row.active,
.stage3-row.active,
.stage4-row.active {
    display:block;
}

</style>

<script>
    var selectRow = function(row) {
        // deactivate all active elements
        var activeElems = document.getElementsByClassName("active");
        for (e in activeElems) {
            e.className = e.className.replace("active","");
        }

        // activate the selected element
        document.getElementsByClassName(row)[0].className += " active";
    }
</script>

<div class="delimiter">

<form>
<ul>
<li><label><input name="stage" type="radio" value="stage1" onClick="selectRow(stage1-row)" checked>Stage 1</label></li>
<li><label><input name="stage" type="radio" value="stage2" onClick="selectRow(stage2-row)">Stage 2</label></li>
<li><label><input name="stage" type="radio" value="stage3" onClick="selectRow(stage3-row)">Stage 3</label></li>
<li><label><input name="stage" type="radio" value="stage4" onClick="selectRow(stage4-row)">Stage 3</label></li>
</ul>
</form>

<div class="stage1-row active">
    Stage 1 content
</div>

<div class="stage2-row">
    Stage 2 content
</div>

<div class="stage3-row">
    Stage 3 content
</div>

<div class="stage4-row">
    Stage 4 content
</div>

</div>

为了进一步改进，您还可以将值传递给html的onClick调用selectRow，并将函数中的值与＆＃34; -row＆＃34;连接，例如var selectedClassName = elementPassedToFunction.className + "-row"，在函数内生成选定的类名，这样你就可以将元素一般性地传递给函数，而不是将类名硬连接到html中的每一行。然后每一行看起来像onClick="selectRow(this)"，并且每行都是相同的。这将允许将来更容易的修改，并可能允许函数重用于文档中其他位置的类似按钮。

如何根据选择的单选按钮将类分配给元素？

2 个答案: