Introduction to layui's iframe jump link and page button jump-Layui Tutorial-php.cn

Introduction to layui's iframe jump link and page button jump

尚

Release： 2019-11-23 16:51:27

forward

9165 people have browsed it

Introduction to layui's iframe jump link and page button jump

1. Navigation jump iframe page problem:

Recommended: layui tutorial

Regarding the navigation jump page problem of layui's iframe nested page, you can see the effect as shown below:

Introduction to layuis iframe jump link and page button jump

In the template page Navigation code:

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

Copy after login

Did you see this thing added to the link:

target="main_self_frame"

Copy after login

Then add it to the nested iframe code:

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

Copy after login

Just add this: name="main_self_frame" ;Then the src jump link is the src link just added above.

##2. The button in the page jumps to other navigation pages and is highlighted Display

While doing this, I discovered another problem, that is, there is a button on your page to jump to the corresponding module. Jump directly to the corresponding module. You have I didn’t find the module I jumped to. The navigation on the left did not highlight the corresponding displayed place. It still defaulted to the original highlight;

Effect display:

Introduction to layuis iframe jump link and page button jump

After the button jumps, the navigation of other pages is not highlighted. There is still a solution, which is to control the jump through js:

1. First, add the html of the button page Add:

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

Copy after login

Add this class to the link: jump_refresh_url; then add:

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

Copy after login

2 to the js of the page. 2. Add js to the template page where the navigation is located:

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;);
            }
        })
    }

Copy after login

Follow the above steps to achieve the effect, please see the effect in the picture below:

Introduction to layuis iframe jump link and page button jump

Please remember to browse on the server side for the effect achieved by this method, browse directly and open the button to jump An error will be reported, because there will be cross-domain problems in the previous operation of iframe, so it must be opened with localhost, etc., and HTML cannot be opened directly. For example, webstrom has its own web server, which is convenient to open. Just open it with localhost.

The above is the detailed content of Introduction to layui's iframe jump link and page button jump. For more information, please follow other related articles on the PHP Chinese website!