0

我有一个 div 如下：

        <div class="slide_items">
            <div class="slide_item"><a href="/url"><img src="image"/></a></div>
            <div class="slide_title"><a href="/url">title</a></div>
        </div>

我想要做的是，而不是在slide_itemsdiv 中的每个项目中都有 URL。我希望用户点击<div class="slide_items">。我希望slide_items作为 div 本身可点击，而不是在每个内部 div 中放置一个 href。

我怎样才能做到这一点？

4

6 回答 6

2

正确的方法是使用单个链接（但将内部元素更改span为有效性）

    <a href="/url" class="slide_items">
        <span class="slide_item"><img src="image"/></span>
        <span class="slide_title">title</span>
    </a>

并确保它们被视为blockcss 中的元素

a.slide_items, a.slide_items span{
    display:block;
}

如果您必须采用 div 方式，请使用

<div class="slide_items" data-href="/url">
    <div class="slide_item"><img src="image"/></div>
    <div class="slide_title">title</div>
</div>

并添加一个脚本（因为你使用 jquery）

$(function(){
    $('.slide_items').click(function(){
        var href = $(this).data('href');
        window.location = href;
    });
});
于 2012-12-08T19:50:22.580 回答
1

您可以添加onclick="window.open('google.com')"事件来模拟指向您的 div 的链接。

如果您希望整个 div 显示为链接，您将需要更改光标。也添加style="cursor: hand; cursor: pointer;"到您的 div 中。

于 2012-12-08T19:47:43.000 回答
1

您可以将onclick属性添加到div：

<div class="slide_items" onclick="location.href='/url';" >
    <div class="slide_item"><img src="image"/></div>
    <div class="slide_title">title</div>
</div>
于 2012-12-08T19:47:47.320 回答
1 
    <div class="slide_items">
        <div class="slide_item"><img src="image" alt="my image" /></div>
        <divclass="slide_title">title</div>
    </div>

js：

$(function() {
    $('.slide_items').click(function() {
        window.location = 'http://www.google.com';
    });
});

CSS：

.slide_items:hover {
    cursor: pointer;
}

http://jsfiddle.net/68Smw/6/

重定向在 jsfiddle 中不起作用，但它应该适合您。

于 2012-12-08T20:02:39.490 回答
1

你可以使用一些简单的 javascript 来完成这项工作

使用 onclick() 事件

所以你的 HTML 代码看起来像

<div class="slide_items">
            <div class="slide_item" onclick="function1()"><img src="image"/></div>
            <div class="slide_title" onclick="function2()">title</div>
        </div>

你的 javascript 代码看起来像

function function1(){
// insert your code here
}

function function2()
{
// insert your code here
}

代码可以根据您的需要以多种方式完成，如果您只想重定向到另一个 div，请使用和display之间交替的属性，更多参考here文档。noneblock

如果你想重定向到另一个网站，你可以使用

window.open("your url")
于 2012-12-08T20:07:55.303 回答
0

如果您希望它可以说：单击此处进入站点：

<div>

<a href="YOUR PAGE HERE!">Click here to enter my site!</a> 

</div>
于 2012-12-08T20:40:27.293 回答