Example Analysis of iframe Jump Link and Page Button Jump in layui

This article mainly introduces the layui iframe jump links and page button jump example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

1. The problem of navigating to iframe pages:

Navigation code on the template page:

All Commodity list Commodity attribute Commodity Classification add solution list one list two hyperlinks Cloud Market publishes goods

Did you see this thing added to the link:

Target= "main_self_frame"

Then add to the nested iframe code:

Add this: name= "main_self_frame"; then the src jump link is from the src link just added above.

two。 The buttons on the page jump to another navigation page and highlight

While doing this, I found another problem, that is, there is a button on your page. If you want to jump to the corresponding module, jump directly to the corresponding module. Have you found the module you jumped to? the navigation on the left does not show the corresponding highlight, or the default is the original highlight.

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

1. First add html on the page of the button:

Jump to commodity attributes jump to commodity classification

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

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

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

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

The effect of this method, please remember to browse on the server side, directly browse the open button to jump will report an error, because there will be cross-domain problems in the operation of iframe, so use localhost to open it, not directly open html. For example, webstrom has its own web server, and it is convenient to open it. Localhost can open it.

The above is all the contents of this article entitled "sample Analysis of iframe Jump links and Page Button Jump in layui". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!