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 :

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>

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

target="main_self_frame"

Ajoutez-la ensuite au code iframe imbriqué :

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

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é :

< ; 🎜>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>

Ajoutez cette classe : jump_refresh_url au lien ; puis ajoutez :

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

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='navList'] a").each(function (ind, val) {
            if($(this).attr('href') === url){
                $('.layui-nav dd').removeClass('layui-this');
                $(this).parent('dd').addClass('layui-this');
            }
        })
    }

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

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!