Layui의 iframe 점프 링크 및 페이지 버튼 점프 소개

1. 탐색 점프 iframe 페이지 문제:

권장 ： layui tutorial

layui의 iframe 중첩 페이지 탐색 점프 페이지 문제와 관련하여 아래와 같이 효과를 볼 수 있습니다.

#🎜🎜 #

템플릿 페이지의 탐색 코드:

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

다음이 링크에 추가된 것을 보셨나요:

target="main_self_frame"

#🎜 🎜#Then 중첩된 iframe 코드를 추가하세요:

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

이것을 추가하세요: name="main_self_frame"; 그러면 src 점프 링크는 방금 위에 추가된 src 링크입니다.#🎜 🎜#

#🎜🎜 #

2. 페이지의 버튼은 다른 탐색 페이지로 이동하고

을 강조 표시합니다. 그런 다음 또 다른 문제를 발견했습니다. 즉, 버튼이 있다는 것입니다. 해당 모듈로 이동하려면 해당 모듈로 바로 이동하세요. 이동한 모듈의 왼쪽에 있는 탐색 기능이 동일하지 않거나 해당 모듈이 강조 표시되어 있는 것을 확인하셨나요? 원본 강조 표시가 기본적으로 사용됩니다. 전송 후 다른 페이지의 탐색이 강조 표시되지 않습니다. 여전히 js를 통해 점프를 제어해야 합니다. 1. 🎜#

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

버튼 페이지의 HTML에

이 클래스를 링크에 추가합니다: jump_refresh_url 그런 다음 페이지의 js에 추가합니다:

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

2. 탐색 방법은 다음과 같습니다.

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

위 단계를 수행하면 효과를 얻을 수 있습니다. 아래 그림에서 효과를 확인하세요.

# 🎜🎜#이 방법으로 얻은 효과는 서버 측에서 직접 찾아보아야 합니다. 점프하기 위해 버튼을 열면 오류가 보고됩니다. iframe 이전 작업에서 도메인 간 문제가 발생하므로 필요합니다. 예를 들어 webstrom에는 자체 웹 서버가 있으므로 localhost에서 열면 됩니다.

위 내용은 Layui의 iframe 점프 링크 및 페이지 버튼 점프 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!