次我们来讲解一个在动态面板里面切换标签的效果。

一、准备元件

1.首先打开一下Axure新建文件，拖取一个矩形，设置长度：375 px ，高度：50 px ；

2.然后输入文本标签，这里的字体大小我们给它设置为14 px ，先把它置灰，这里我的字体色值为 #999999 ；

3.最后我们加一个小黑条，脱出一个矩形，设置长度：40 px ，高度：2 px 。给它名为小黑条。

以上样式我是按照常规移动端尺寸做的，不用说每个尺寸都跟我一样，只要保存美观即可。

好的，完成之前我们会得到以下的样子：

二、设置文本的交互样式

1.我们点击全选所有文本 – 右键选择交互样式 – 选择选中一项 – 把字体颜色设置为 #333333，然后点击确定；

2.第二步还是选择所有文本 – 右键选择设置选项组名称 – 命名“标签切换”（这里可随意命名）；

3.因为小黑条在标题一的底部，我们需要单选标题一 – 设置为默认选中状态；

这时候我们的前提条件就做好了，可以准备下一步了。

三、设置交互效果

1.点击交互效果 “鼠标点击时” ，设置该元件为 “true” （选中） ；

2.点击移动，选择小黑条，设置移动为绝对位置，X轴为 [[This+2]] , Y 轴为 [[This+28]] ，动画为线性，时间为250毫秒，点击确定;

3.复制标题一的动态效果，粘贴到所有文本，这时切换标签的效果就完成了。

已完成的小伙伴，可以点击预览尝试一下自己做的效果，感受一下自己做出来的成果！

四、进阶

已完成以上步骤的小伙伴们，可以尝试一下进阶效果。咱们的标题是《动态面板：切换标签》，咱们是不是还没有用到动态面板呢？

下面来尝试着做吧！

1.我们把文本再新增出 n 个（记得不要复制第一个默认为选中状态的标题一），让他超出 375 px 的长度，同时矩形需要跟上；

2.然后我们全选所有元件，右键点击“转换为动态面板”，然后我们给这个动态面板命名为“移动面板”；

3.然后我们再在这个基础上给它再加一个动态面板，命名为“固定面板”，给他设置一个固定宽度为 375 px ，然后可以看到以下样式；

4.这时候我们打开固定面板，按照 375 px 的宽度定一个中心点，拉一个标尺;

5.以下的意思是点击标题一、二、三，新增一个条件为：移动“移动面板”至 X 轴为 0 ，Y 轴为 0 ；但到标题四时， X 轴需要到中心点的地方，X 轴会变成 -42 ，Y 轴保持不变。以此类推…（看以下第一张图）下一个是 -105 px 、 -168 px 、 -212 px 、 -212 px 、 -212 px （后面三个都为 -212 px 的原因是： “移动面板” 的移动不能少于固定面板右侧的蓝色线，看以下第二张图）;

6.看一下设置移动“移动面板”的设置样式（效果做在文本里）；

7.按照上面 “5” 的规则，把其他文本都加上移动“移动面板”的效果;

8.所有步骤完成了之后，可得到该效果（腾讯视频链接）：

https://v.qq.com/x/page/c1342lfqgss.html?start=1

本文由 @李桂东 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自网络

习借助网络技术将旧的单选按钮转换为具有现代外观的单选卡。

单选按钮是表单的关键元素之一。当以正确的方式使用时，这些是惊人的，因为它们简化了从给定列表中选择一个选项的任务。但是默认的单选按钮看起来不太好。我们需要对其进行改造，使其在用户看来令人惊叹，这将显着改善网站的用户体验。

在本文中，我将逐步介绍如何在 Web 应用程序中实现自定义单选卡。在这里，我们将把旧的单选按钮变成漂亮的 CSS 卡片。每张卡片都有一个检查（勾号）图标，默认情况下它是隐藏的，并且仅在用户单击卡片时才会出现。

通过 3 个简单的步骤构建令人惊叹的无线电卡

1. 使用 HTML 创建单选卡的布局。
2. 使用 JavaScript 使无线电卡功能化。
3. 使用 CSS 设计无线电卡。

第 1 步：使用 HTML 创建单选卡的布局

让我们为我们的单选卡设置一个基本的 HTML 布局。它将包括一个容纳卡片的容器。在其中，我们将添加三张卡片，每张卡片都有一个勾号（勾号）图标、一个卡片图标（图像）、一个卡片标签（标题）和一个卡片标签说明（附加内容）。每个无线电卡都有一个名为 radio-card 的通用类，为了使其正常工作，我们需要为每个无线电卡添加另一个独特的类，例如 radio-card-1、radio-card-2、radio-card-3 和很快。这些卡片将有一个 onclick 属性，该属性将调用名为 selectRadioCard() 的函数。在参数中传递卡号，如 1、2 或 3。我们将在下一步编写使卡片正常工作的逻辑。

将以下代码片段添加到您要实现自定义单选卡的部分。

<div>
    <h1>Create Stunning Radio Cards Using HTML, CSS, and JavaScript</h1>
    <div id="radio-cards-container">
        <!-- Radio Card 1 -->
        <div class="radio-card radio-card-1" onclick="selectRadioCard('1')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-react.png" alt="React" />
                </div>
                <div class="radio-card-label">
                    React
                </div>
                <div class="radio-card-label-description">
                    Build an application using React.
                </div>
            </div>
        </div>
        <!-- Radio Card 2 -->
        <div class="radio-card radio-card-2" onclick="selectRadioCard('2')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-angular.png" alt="Angular" />
                </div>
                <div class="radio-card-label">
                    Angular
                </div>
                <div class="radio-card-label-description">
                    Build an application using Angular.
                </div>
            </div>
        </div>
        <!-- Radio Card 3 -->
        <div class="radio-card radio-card-3" onclick="selectRadioCard('3')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->
            <div class="text-center">
                <div class="radio-card-icon">
                    <img src="./images/icon-vue.png" alt="Vue" />
                </div>
                <div class="radio-card-label">
                    Vue
                </div>
                <div class="radio-card-label-description">
                    Build an application using Vue.
                </div>
            </div>
        </div>
    </div>
</div>

第 2 步：使用 JavaScript 使无线电卡功能化

现在，我们需要实现当用户触发卡片上的点击事件时使单选卡片起作用的逻辑。 添加一个名为 selectRadioCard 的函数，它将接受一个名为 cardNo 的参数。 它将首先找到所有的无线电卡，然后遍历它们中的每一个，并删除选定的类。 之后，它将找到具有指定卡号的元素，如 radio-card-1、radio-card-2 或 radio-card-3，并将选择的类添加到其中。

在页面上的脚本元素中添加以下代码片段。 或者，您可以创建一个外部 JavaScript 文件并使用它。

const selectRadioCard=(cardNo)=> {
    /**
     * Loop through all radio cards, and remove the class "selected" from those elements.
     */
    const allRadioCards=document.querySelectorAll(".radio-card");
    allRadioCards.forEach((element, index)=> {
        element.classList.remove(["selected"]);
    });
    /**
     * Add the class "selected" to the card which user has clicked on.
     */
    const selectedCard=document.querySelector(".radio-card-" + cardNo);
    selectedCard.classList.add(["selected"]);
};

第 3 步：使用 CSS 设计无线电卡

由于我们已经完成了自定义单选卡的实现，我们需要添加一些 CSS 片段来设计我们的 HTML 内容的布局。

将以下代码片段添加到页面上的样式元素。 或者，您可以创建一个外部 CSS 文件并使用它。

#radio-cards-container {
    margin-top: 5rem;
    width: 75vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-card {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    width: 300px;
    margin-right: 2rem;
    margin-bottom: 2rem;
    padding: 3rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.radio-card:hover {
    border: 2px solid #016787;
    cursor: pointer;
}

.radio-card-check {
    display: none;
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
}

.radio-card-check i {
    font-size: 1.6rem;
    color: #016787;
}

.text-center {
    text-align: center;
}

.radio-card-icon img {
    width: 80px;
}

.radio-card-label {
    margin-top: 1rem;
    font-weight: 600;
    font-size: 1.2rem;
}

.radio-card-label-description {
    margin-top: 0.5rem;
    color: rgba(0, 0, 0, 0.7);
}

.radio-card.selected {
    border: 2px solid #016787;
}

.radio-card.selected .radio-card-check {
    display: inline-flex;
}

结果

您已完成学习如何使用纯 HTML、CSS 和 JavaScript 创建令人惊叹的单选卡。

关注七爪网，获取更多APP/小程序/网站源码资源！