Question

我有一个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_items div中的每个项目中使用网址。我希望用户点击<div class="slide_items">。我希望slide_items可以作为div本身进行点击，而不是在每个内部div中放置一个href。

我该怎么做？

Answer 1

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

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

确保将它们视为来自css的block元素

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;
    });
});

Answer 2

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

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

Answer 3

您可以向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>

Answer 4

    <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中不起作用，但它应该适合你。

Answer 5

你可以使用一些简单的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和none之间交替的block属性，更多在此参考documentation 。

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

window.open("your url")

Answer 6

如果你想要它可以说：点击这里进入网站：

<div>

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

</div>

从div制作ahref

6 个答案: