Javascript 通过jquery显示的图像的自定义超链接
我有一个简单的html页面,根据下拉菜单中的选择显示图像Javascript 通过jquery显示的图像的自定义超链接,javascript,jquery,html,image,dropdown,Javascript,Jquery,Html,Image,Dropdown,我有一个简单的html页面,根据下拉菜单中的选择显示图像 <head> <script src="jquery.min.js"></script> </head> <div id="mymenu"> <select id="men" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);chngSel()"> <o
<head>
<script src="jquery.min.js"></script>
</head>
<div id="mymenu">
<select id="men" onchange="$('#imageToSwap').attr('src', this.options[this.selectedIndex].value);chngSel()">
<option value="product_a.png" selected>Product A</option>
<option value="product_b.png" selected>Product B</option>
<option value="product_c.png" selected>Product C</option>
</select>
</div>
<img id="imageToSwap" class="profile" src="all_products.png">
</head>
</html>
产品A
产品B
产品C
图像将按照所选选项显示
选择产品B选项后,将显示产品B.png,单击产品B.png后是否可以将超链接更改为产品B.html页面?显示图像的变量href?不确定,但不能同时选择3个选项。 所选内容用作“默认选择”。请尝试只使用一次。您的HTML
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="mymenu">
<select id="men">
<option data-url="/productA" value="product_a.png">Product A</option>
<option data-url="/productB" value="product_b.png">Product B</option>
<option data-url="/productC" value="product_c.png">Product C</option>
</select>
</div>
<img id="imageToSwap" class="profile" src="all_products.png">
</body>
</head>
</html>
$(function() {
var $imageToSwap = $('#imageToSwap');
// change the source of the image
$('#men').on('change', function(e) {
var $this = $(this),
src = $this.val(),
url = $this.data('url');
$imageToSwap.attr({ src }).data({ url });
});
// click event for the image
$imageToSwap.on('click', function() {
var $this = $(this),
url = $this.data('url');
location.href = url;
});
});