jquery关于商品列表链接的跳转的实现

 时间:2024-10-16 12:26:16

1、第一步 引入jqury代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul class="search_product_list"> <li> <a href="baidu.html?wd=214414"> 百度 </a> </li> </ul> <script src="../../js/jquery.js"></script> </body></html>

2、第二步 新建一个html文件baidu.html代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>

3、第三步 利用jquery中attr获取href实现跳转 $(".search_product_list").on('click',function(){ window.location.href= $(".search_product_list a").attr('href'); })整体代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .search_product_list{ width:100px; height:100px; border: 1px solid red; } </style> </head> <body> <ul class="search_product_list"> <li> <a href="baidu.html?wd=214414"> 百度 </a> </li> </ul> <script src="../../js/jquery.js"></script> <script> $(function() { $(".search_product_list").on('click',function(){ window.location.href= $(".search_product_list a").attr('href'); }) }) </script> </body></html>

  • html+css实现ps标尺网页框架特效
  • 蛤蜊炖蛋的做法
  • 女人的几大养生保健法宝
  • 如何在店铺中使用收藏链接
  • 海贼王里将恶魔果实运用极致的六人
  • 热门搜索
    键盘灯不亮怎么回事 卵巢功能衰退怎么调理 使命召唤战区怎么下载 霉菌性阴炎怎么引起的原因 怎么变白皮肤简单有效 口罩怎么戴 茴香苗怎么吃 用手机怎么赚钱 前列腺怎么检查 稀饭怎么煮