Question

我想在所有离子选项卡和标签交换机上显示一些常见内容，我想切换部分内容而不是整个内容。

基本上我有一个用户进行操作的图像。该图像必须仅包含在模板中一次。

有许多工具按类别划分。当用户选择特定类别时，将显示其工具。

所以，我选择离子的tabs-interface来显示不同的工具集。但问题是我无法找到一个可以放置该图像的常见位置，它应该显示在所有标签中。怎么实现呢？这就是我在做的事。

<ion-tabs class="tabs-positive tabs-icon-only">
    <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
        <!-- Tab 1 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab One
        </ion-content>
    </ion-tab>

    <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
        <!-- Tab 2 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab Two
        </ion-content>
    </ion-tab>

    <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
        <!-- Tab 3 content -->
        <ion-content>
            <!-- common image -->
            <img src="tshirt.jpg">

            Dynamic Content Of Tab Three
        </ion-content>
    </ion-tab>
</ion-tabs>

Answer 1

如下所示：

<ion-content>
      <div class="abc">
        Dynamic Content Of Tab One
      </div>
</ion-content>

<script type="text/javascript">
$(function(){
    var common = $('.abc');
    $.each( common , function( key, value ) {
       $(this).prepend('<img src="tshirt.jpg">');
    });
});
</script>

有很多方法可以完成这项任务：使用.insertBefore()

您可能需要稍加修改。

在所有标签中显示常见内容 - 离子

1 个答案: