## 内部切换

在 Mobilebone 框架体系下，页面间的过场切换效果可以复用在局部区域以便实现内部切换效果。

### 语法

需要用到两个 HTML 属性进行设置：

- `data-container`设置局部过场切换的容器元素；
- `data-classpage`设置局部过场内容公用的类名；

### 案例

例如，下面这个选项卡效果：

妹子1 妹子2 妹子3

其HTML代码结构如下：

    <div id="tabX" class="tab-x">
        <div class="tabview">
            <a href="#tab1" data-container="tabX" data-classpage="tab" class="active">妹子1</a>
            <a href="#tab2" data-container="tabX" data-classpage="tab">妹子2</a>
            <a href="#tab3" data-container="tabX" data-classpage="tab">妹子3</a>
        </div>
        <div id="tab1" class="tab in" data-callback="tabButtonActive">
            <img src="mm1.jpg">
        </div>
        <div id="tab2" class="tab out" data-callback="tabButtonActive">
            <img src="mm2.jpg">
        </div>
        <div id="tab3" class="tab out" data-callback="tabButtonActive">
            <img src="mm3.jpg">
        </div>
    </div>

必要的CSS代码：

    .tab.out { display: none; }

下面的 JavaScript 代码与切换效果本身无关，主要是同步按钮选中态效果：

    tabButtonActive = function(pagein, pageout, options) {
        var target = options.target;
        var eleAcive = target.parentElement.querySelector('.active');
        if (eleAcive) eleAcive.classList.remove('active');
        target.classList.add('active');
    };

局部过场切换效果是不会触发 `history` 变化的，也不会改变页面的`title`标题，其他规则跟主页面元素的过场切换一致，例如各种生命周期事件函数的使用等。

发现错误？想参与编辑？在 GitHub 上编辑此页！