Introduction au lien de saut iframe et au saut de bouton de page de layui-Tutoriel Layui-php.cn

Introduction au lien de saut iframe et au saut de bouton de page de layui

尚

Libérer： 2019-11-23 16:51:27

avant

9165 Les gens l'ont consulté

Introduction au lien de saut iframe et au saut de bouton de page de layui

1. Problème de page iframe de saut de navigation :

Recommandé : tutoriel layui

Concernant le problème de page de saut de navigation de la page imbriquée iframe de layui, vous pouvez voir l'effet comme le montre la figure ci-dessous :

Introduction au lien de saut iframe et au saut de bouton de page de layui

sur la page du modèle Code de navigation :

<ul class="layui-nav layui-nav-tree" lay-filter="navList">
    <li class="layui-nav-item layui-nav-itemed">
        <a class="" href="javascript:;">所有商品</a>
        <dl class="layui-nav-child">
            <dd class="layui-this"><a href="goodsList.html" target="main_self_frame">商品列表</a></dd>
            <dd><a href="goodsAttribute.html" target="main_self_frame">商品属性</a></dd>
            <dd><a href="goodsCategories.html" target="main_self_frame">商品分类</a></dd>
            <dd><a href="">添加</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">云市场</a></li>
    <li class="layui-nav-item"><a href="">发布商品</a></li>
</ul>

Copier après la connexion

Avez-vous vu cette chose ajoutée au lien :

target="main_self_frame"

Copier après la connexion

Ajoutez-la ensuite au code iframe imbriqué :

<iframe src="goodsList.html" name="main_self_frame" frameborder="0" class="layadmin-iframe"></iframe>

Copier après la connexion

Ajoutez simplement ceci : name=" main_self_frame" ;Ensuite, le lien de saut src est le lien src qui vient d'être ajouté ci-dessus.

2. Le bouton dans la page passe à d'autres pages de navigation et est mis en surbrillance Affichage

En le faisant, j'ai découvert un autre problème, c'est à dire qu'il y a un bouton dans votre page, vous voulez passer au module correspondant, passer directement au module correspondant, vous avez je n'ai pas trouvé le module auquel j'ai sauté. La navigation sur la gauche n'est pas mise en surbrillance à l'endroit affiché correspondant. Elle est par défaut sur la surbrillance d'origine

L'effet est affiché :

Introduction au lien de saut iframe et au saut de bouton de page de layui

< ; 🎜>Après le saut du bouton, la navigation vers les autres pages n'est pas mise en évidence. Il existe encore une solution, vous devez contrôler le saut via js :

1. Tout d'abord, ajoutez le html de la page du bouton Ajouter :

<a href="goodsAttribute.html" class="layui-btn jump_refresh_url">跳转到商品属性</a>
<hr>
<a href="goodsCategories.html" class="layui-btn jump_refresh_url">跳转到商品分类</a>

Copier après la connexion

Ajoutez cette classe : jump_refresh_url au lien ; puis ajoutez :

$(".jump_refresh_url").click(function () {
     var url = $(this).attr(&#39;href&#39;);
      top.refreshHighlight(url);
 });

Copier après la connexion

au js de la page 2. Ajoutez js à la page modèle où se trouve la navigation :

function refreshHighlight(url) {
        $ = layui.jquery;
        $(".layui-nav[lay-filter=&#39;navList&#39;] a").each(function (ind, val) {
            if($(this).attr(&#39;href&#39;) === url){
                $(&#39;.layui-nav dd&#39;).removeClass(&#39;layui-this&#39;);
                $(this).parent(&#39;dd&#39;).addClass(&#39;layui-this&#39;);
            }
        })
    }

Copier après la connexion

Suivez les étapes ci-dessus pour obtenir l'effet, veuillez voir l'effet dans l'image ci-dessous :

Introduction au lien de saut iframe et au saut de bouton de page de layui

N'oubliez pas de naviguer côté serveur pour l'effet obtenu par cette méthode, parcourez directement et ouvrez le bouton pour sauter. Une erreur sera signalée, car il y aura des problèmes inter-domaines dans l'opération précédente de l'iframe, il doit donc être ouvert avec localhost, etc., et HTML ne peut pas être ouvert directement. Par exemple, webstrom possède son propre serveur Web, ce qui est pratique à ouvrir. Il suffit de l'ouvrir avec localhost

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!