AXURE教程-页签切换的实现方式

        页签切换的功能在产品设计中经常会用到，比如导航切换、页面内的TAB页签切换等。那么，在Axure中如何实现？在原型绘制过程中，页签切换的实现方式有多种，这次来和大家分享一种最近新学的实现方式。

        这种实现方式主要通过运用设置页签选项的 交互样式 、对页签选项 设置选项组、动态面板 的方式来实现。比如下面是我们最终要实现的效果：

要实现以上效果，我们分步来 *** 作：

一、设置页签选项的 交互样式 ，来区分页签选项在鼠标悬停、选中/未选中下样式的不同。

1.从元件库拖矩形出来作为页签选项，并分别命名。另拖一条水平线出来做装饰；

2.选中四个矩形，设置为无边框；

3.选中第一个页签选项，设置鼠标悬停和选中状态下的交互样式后，确定保存。后面的页签也做相同的设置；

4.默认页面载入状态下，第一个页签选项被选中，所以要做如下设置：

二、通过 设置选项组 ，来实现当选择一个页签选项时，其他页签选项不会被选中。

1.全选四个页签选项，点击鼠标右键，在d出的菜单中选择“设置选项组”，输入选项组名称后确定即可。

三、通过 动态面板 ，来实现不同页签选项对应不同的页面。

1.从元件库中拖一个动态面板，双击动态面板，在d出的对话框中，对动态面板命名并增加四个状态；

2.双击每个面板状态，对不同的面板状态设置对应的页面。

四、通过 设置交互属性 ，实现页签切换时的动作交互。

1.选中第一个页签选项【全部】，设置鼠标单击时的动作交互：（1）设置面板状态，选择“审核状态”的动态面板，设置其状态为“全部”；（2）设置选中状态，设置当前元件的选中状态值为ture。

        2.同理，设置其余三个页签选项对应的鼠标单击时的动作交互，包括对应的动态面板状态和当前元件的选中状态。

        按照以上步骤完成 *** 作后，预览即可得到目标效果。大家有什么更好更实用的方法吗，来一起分享交流吧！

1、利用css的:hover

<div id="content">  

    这是原本的div层  

    <div id="show">  

        <p>这是鼠标移动上去后的div层</p>  

    </div>  

</div> 

<style type="text/css">  

        *{  

            margin: 0  

            padding: 0  

        }  

        #content{  

            background:#0CF  

            height:200px  

            width:200px  

            margin-left: 20px  

            margin-top: 20px  

        }  

        #show{  

            width:200px  

            height:200px  

            margin-top: 20px  

            background:#F09  

            top:0px  

            position:absolute  

            opacity: 0  

            display: block  

            font-size: 12px  

            transition: 0.3s  

            -webkit-transition: .5s  

            -moz-transition: .5s  

        }  

        #content:hover #show{  

            color: #656e73  

            opacity: 1  

        }  

    </style>

---