検索
ホームページウェブフロントエンドライユイのチュートリアルLauiuiのiframeジャンプリンクとページボタンジャンプの紹介

Lauiuiのiframeジャンプリンクとページボタンジャンプの紹介

#1. ナビゲーション ジャンプ iframe ページの問題:

推奨:

layui チュートリアル

layui の iframe ネストされたページのナビゲーション ジャンプ ページの問題に関しては、以下に示すような効果が確認できます。

Lauiuiの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"

次に、それをネストされた iframe コードに追加します:

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

これを追加するだけです: name="main_self_frame" ;次に、src ジャンプ リンクは、上で追加したばかりの src リンクです。

##2. ページ内のボタンは他のナビゲーション ページにジャンプし、強調表示されます。 Displayこれを実行しているときに、別の問題を発見しました。つまり、ページ上に対応するモジュールにジャンプするボタンがあります。対応するモジュールに直接ジャンプしてください。ジャンプ先のモジュールが見つかりませんでした。ナビゲーション左側のボタンは、対応する表示場所をハイライト表示しませんでした。デフォルトのまま、元のハイライトのままです。

##効果表示:

#ボタンがジャンプした後、ナビゲーションが表示されます。他のページの部分は強調表示されていません。解決策はまだあります。js を介してジャンプを制御することです:

Lauiuiのiframeジャンプリンクとページボタンジャンプの紹介1。まず、ボタン ページの HTML を追加します。追加:

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

これを追加します。クラスをリンクに追加:jump_refresh_url;次に、ページの js に

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

2 を追加します 2. ナビゲーションが配置されているテンプレート ページに js を追加します:

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

上記の手順に従います効果を実現するには、以下の図の効果を参照してください。

この方法によって達成される効果をサーバー側で参照することを忘れないでください。直接参照して、ジャンプするボタン iframe の前の操作ではクロスドメインの問題が発生するため、エラーが報告されます。そのため、localhost などで開く必要があり、HTML を直接開くことはできません。たとえば、webstrom には独自の Web があります。これは開くのに便利です。localhost.

で開くだけです。

以上がLauiuiのiframeジャンプリンクとページボタンジャンプの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事はfly社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか?無限のスクロールにLayUIのフローモジュールを使用するにはどうすればよいですか?Mar 18, 2025 pm 01:01 PM

この記事では、無限のスクロール、セットアップ、ベストプラクティス、パフォーマンスの最適化、および強化されたユーザーエクスペリエンスのカスタマイズをカバーするためにLayUIのフローモジュールを使用して説明します。

LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか?LayUIの要素モジュールを使用して、タブ、アコーディオン、および進行状況バーを作成するにはどうすればよいですか?Mar 18, 2025 pm 01:00 PM

この記事では、LayUIの要素モジュールを使用して、タブ、アコーディオン、プログレスバーなどのUI要素を作成およびカスタマイズする方法を詳しく説明します。

LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか?LayuiのCarouselモジュールの外観と動作をカスタマイズするにはどうすればよいですか?Mar 18, 2025 pm 12:59 PM

この記事では、LayuiのCarouselモジュールのカスタマイズについて説明し、遷移効果、自動再生設定、カスタムナビゲーションコントロールの追加など、外観と行動のためのCSSとJavaScriptの変更に焦点を当てています。

LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか?LayuiのCarouselモジュールを使用して画像スライダーを作成するにはどうすればよいですか?Mar 18, 2025 pm 12:58 PM

この記事では、LayuiのCarouselモジュールを画像スライダーに使用し、セットアップの手順、カスタマイズオプションの実装、自動再生とナビゲーションの実装、およびパフォーマンス最適化戦略についてガイドします。

ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?ファイルの種類とサイズを制限するようにLayUIのアップロードモジュールを構成するにはどうすればよいですか?Mar 18, 2025 pm 12:57 PM

この記事では、LayUIのアップロードモジュールの設定を、受け入れ、ext、サイズのプロパティを使用してファイルの種類とサイズを制限し、違反のエラーメッセージをカスタマイズすることについて説明します。

LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか?LayUIのレイヤーモジュールを使用して、モーダルウィンドウとダイアログボックスを作成するにはどうすればよいですか?Mar 18, 2025 pm 12:46 PM

この記事では、LayUIのレイヤーモジュールを使用してモーダルウィンドウとダイアログボックスを作成する方法、セットアップ、タイプ、カスタマイズ、および避けるべき一般的な落とし穴の詳細について説明します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。