0

我正在使用带有滑块插件的 wordpress 网站。轨道滑块。该网站是http://avonmore.ac.nz/。

我试图弄清楚如何使用 jquery 代码在每个滑块图像上放置一个链接。下面的代码成功运行。但是，有一个包装器不允许单击滑块。简而言之，即使我对图像使用 z-index 和相对位置，也无法单击锚标记。

jQuery代码：

 jQuery(document).ready(function(){
    jQuery('.slide-slide.slide-content-1702').wrap("<a class='slider-image' href='<?php echo home_url(); ?>/courses/freight-warehousing/'></a>");
    jQuery('.slide-slide.slide-content-1700').wrap("<a class='slider-image' href='<?php echo home_url(); ?>/courses/hairdressing/'></a>");
 });

问：如何使 SLIDER WRAPPER 不阻止链接？

4

2 回答 2

2

为了做你想做的事，我认为你只需.slide-slide要从你的 jQuery() 中删除，因为通过你的 url 我看不到那个元素。

为了做到这一点，我们可以假设因为链接是通过 jQuery 放置的，所以它们不需要被索引 (SEO)。因此，您可以尝试将单击绑定到 .slide-content-x、.slide-slide 或父元素并更改窗口位置？

使用：http://avonmore.ac.nz/？

$( '#orbit-inside' ).on( 'click', '.slide-content', function() {
    var url = 'http://avonmore.ac.nz/';

    if ( $( this ).hasClass( '.slide-content-1700' ) ) {
        url += '/courses/hairdressing/';
    }

    if ( $( this ).hasClass( '.slide-content-1702' ) ) {
        url += '/courses/freight-warehousing/';
    }

    if ( url != 'http://avonmore.ac.nz/' ) {
        // Make sure something was set
        window.location.href = url;
    }
});
于 2013-08-12T05:01:24.343 回答
2

导致 z-index 设置出现问题的 div 是“#orbit-inside”。此 div 上的 z-index 设置需要为 0 或更高才能使链接正常工作。此外，为了使整个滑块可点击，您需要包装“.slide-slide”和“slide-content”元素。

例如：

jQuery(document).ready(function(){
    jQuery('.slide-slide.slide-content-1702').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/freight-warehousing/'></a>");
    jQuery('.slide-slide.slide-content-1700').parent().wrapInner("<a class='slider-image' href='<?php echo home_url(); ?>/courses/hairdressing/'></a>");
});

此外，您可能希望将“#orbit-inside a”的 css 设置更改为以下内容：

#orbit-inside a {
    display: block;
    width: 100%;
    height: 100%;
    color: #333333;
}

The only issue now is that the background image you applied to div #wrapper is being overlapped. You could resolve this by making a separate div for the background image and then use a combination of z-index and position: absolute; to position it correctly.

Hope this helps.

于 2013-08-12T05:25:48.037 回答