#1. ナビゲーション ジャンプ iframe ページの問題:
推奨: 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"次に、それをネストされた iframe コードに追加します:
<iframe src="goodsList.html" name="main_self_frame" frameborder="0" class="layadmin-iframe"></iframe>これを追加するだけです: name="main_self_frame" ;次に、src ジャンプ リンクは、上で追加したばかりの src リンクです。
##2. ページ内のボタンは他のナビゲーション ページにジャンプし、強調表示されます。 Displayこれを実行しているときに、別の問題を発見しました。つまり、ページ上に対応するモジュールにジャンプするボタンがあります。対応するモジュールに直接ジャンプしてください。ジャンプ先のモジュールが見つかりませんでした。ナビゲーション左側のボタンは、対応する表示場所をハイライト表示しませんでした。デフォルトのまま、元のハイライトのままです。
##効果表示: #ボタンがジャンプした後、ナビゲーションが表示されます。他のページの部分は強調表示されていません。解決策はまだあります。js を介してジャンプを制御することです: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('href'); top.refreshHighlight(url); });
2 を追加します 2. ナビゲーションが配置されているテンプレート ページに js を追加します:
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 の前の操作ではクロスドメインの問題が発生するため、エラーが報告されます。そのため、localhost などで開く必要があり、HTML を直接開くことはできません。たとえば、webstrom には独自の Web があります。これは開くのに便利です。localhost.で開くだけです。
以上がLauiuiのiframeジャンプリンクとページボタンジャンプの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

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

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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