Javascript Jquery指向外部网页的链接
我有以下代码Javascript Jquery指向外部网页的链接,javascript,jquery,html,Javascript,Jquery,Html,我有以下代码 <script type="text/JavaScript"> // prepare the form when the DOM is ready $(document).ready(function() { var galleryClass = '.gallery'; $(galleryClass+' li img').click(function(){ var $gallery = $(this).parents(galleryClass); $(
<script type="text/JavaScript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var galleryClass = '.gallery';
$(galleryClass+' li img').click(function(){
var $gallery = $(this).parents(galleryClass);
$('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''))
.parent().attr('href',$(this).parent().attr('href'));
});
var imgSwap = [];
$(galleryClass+' li img').each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>
//当DOM就绪时准备表单
$(文档).ready(函数(){
var galleryClass='.gallery';
$(galleryClass+li img')。单击(函数(){
var$gallery=$(this).parents(galleryClass);
$('.main img',$gallery).attr('src',$(this.attr('src')).replace('thumb/','')
.parent().attr('href',$(this.parent().attr('href'));
});
var imgSwap=[];
$(galleryClass+li img')。每个(函数(){
imgUrl=this.src.replace('thumb/','');
imgSwap.push(imgUrl);
});
$(imgSwap.preload();
});
$.fn.preload=函数(){
这个。每个(函数(){
$('
下面是HTML代码
<div class="gallery">
<img src="gallery/img_1.png" alt="" class="main-img" />
<img src="images/Select-Brands.jpg" width="1010" height="50" />
<ul>
<li><img src="gallery/thumb/img_1.png" alt="" /></li>
<li><img src="gallery/thumb/img_2.png" alt="" /></li>
<li><img src="gallery/thumb/img_3.png" alt="" /></li>
<li><img src="gallery/thumb/img_4.png" alt="" /></li>
<li><img src="gallery/thumb/img_5.png" alt="" /></li>
<li><img src="gallery/thumb/img_6.png" alt="" /></li>
<li><img src="gallery/thumb/img_7.png" alt="" /></li>
<li><img src="gallery/thumb/img_8.png" alt="" /></li>
<li><img src="gallery/thumb/img_9.png" alt="" /></li>
</ul>
</div>
这是一个站点示例。
当你点击每个徽标时,它会显示一个新的图像。我想让每个大图像(其中8个)转到8个单独的外部网站。他们还需要打开一个单独的窗口
执行此操作所需的代码是什么?谢谢!对不起,请快速阅读问题
<ul>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_1.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_2.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_3.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_4.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_5.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_6.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_7.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_8.png" alt="" /></li>
<li><img rel="http://www.google.com" src="http://flairnecessities.com/AskarBrands/gallery/thumb/img_9.png" alt="" /></li>
</ul>
HTML
CSS
谢谢你的评论,Jay。这样做实际上会使较小的徽标(在栏中的徽标)链接到外部网页,而不是上面的较大图片。我希望当你单击较小的徽标时,它们会更改上面的较大图片,当你单击较大的图片时,它会将你带到该公司的网站。
<a id ="linker" href="#" target="_blank"><img src="http://flairnecessities.com/AskarBrands/gallery/img_1.png" alt="" class="main-img" /></a>
var link = $(this).attr('rel');
$('#linker').attr('href',link);
<img src="img.png" data-lg="large.png" data-href="http://google.com">
<a class="lg-link"><img class"img-lg"></a>
$("[data-lg]").click(function(){
$(".img-lg").attr("src", $(this).data("lg"));
$(".lg-link").attr("href", $(this).data("href"));
});
[data-lg]{
cursor:pointer;
}