仅用HTML和CSS实现单选框切换时传递锚点href值到外部元素

可行性判断 #

直接用CSS修改.some的href属性做不到。CSS只能管元素的样式显示，没法直接改HTML的属性值，比如href这种核心属性，只能靠视觉模拟或者调整结构来实现类似效果。

纯HTML+CSS的替代方案 #

可以调整页面结构，利用CSS的:checked状态和兄弟选择器，通过显示/隐藏不同的链接来达成需求。修改后的代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.option .tick {
    display: none;
}

.option input:checked ~ .tick {
    display: inline;
}

/* 默认隐藏所有目标链接 */
.some-link {
    display: none;
}

/* 选中对应单选框时，显示对应的链接 */
#happy1:checked ~ .some-container #some-happy1 {
    display: inline;
}

#happy2:checked ~ .some-container #some-happy2 {
    display: inline;
}
</style>
</head>
<body>
    <div class="step1">
        <div class="row">
            <label class="option">
                Option 1
                <input type="radio" name="select" id="happy1">
                <a href="happy" class="tick">Happy 1</a>
            </label>
        </div>
        <div class="row">
            <label class="option">
                Option 2
                <input type="radio" name="select" id="happy2">
                <a href="happy" class="tick">Happy 2</a>
            </label>
        </div>
        <!-- 把需要切换的链接放到单选框的同级容器下，方便CSS关联状态 -->
        <div class="some-container">
            <a href="happy" id="some-happy1" class="some-link">Some</a>
            <a href="happy" id="some-happy2" class="some-link">Some</a>
        </div>
    </div>
</body>
</html>

方案说明 #

1. 把要切换的链接移到包含单选框的容器里，让它们和单选框成为同级元素，这样CSS才能用兄弟选择器关联选中状态。
2. 默认把所有目标链接隐藏，当对应单选框被选中时，只显示匹配的那个链接，每个链接的href提前设好对应.tick的地址就行。
3. 如果要保持链接文本一样，只要每个替换链接的文字写相同内容就可以。

额外说明 #

要是必须保留原来的结构（.some在step1容器外面），纯CSS根本做不到关联——因为CSS没有父选择器，也没法跨父容器选后续元素，这种情况就只能用JavaScript来改属性值了。

内容的提问来源于stack exchange，提问作者Mark Evans