首页layui 点击页面跳转

layui 点击页面跳转

时间: 2024-01-23 22:14:52 浏览: 155

以下是一个使用layui实现点击页面跳转的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui点击页面跳转示例</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6"> <ul class="layui-nav"> <li class="layui-nav-item"><a href="page1.html">页面1</a></li> <li class="layui-nav-item"><a href="page2.html">页面2</a></li> <li class="layui-nav-item"><a href="page3.html">页面3</a></li> </ul> </div> <div class="layui-col-md6"> <iframe id="iframeMain" src="" frameborder="0" width="100%" height="500"></iframe> </div> </div> </div> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script> <script> $(document).ready(function(){ $("ul.layui-nav li a").click(function (e) { e.preventDefault(); $("#iframeMain").attr("src", $(this).attr("href")); }); }); </script> </body> </html> ``` 这个例子中，我们使用了layui的导航栏和iframe组件。当点击导航栏中的链接时，通过jQuery的click事件监听器，阻止默认的跳转行为，并将链接的href属性值赋给iframe的src属性，实现页面的跳转。

阅读全文