Question

这个问题可能已被多次回答，但我需要帮助，因为我无法实现我打算做的事情。

我有这个观点：

<div class="bookView">
    @for (int i = 0; i < Model.Count; i++)
    {
        <div class="bookUnit" onclick="$@Url.Action("SeeBook", new { bookID = Model[i].BookID})">
            <span class="linkSpan"></span>
            <div class="bookTitle" data-id="@Model[i].BookID">
                @Html.DisplayFor(_item => _item[i].BookName) 
            </div>    
            <div class="bookDetail">
                <div class="bookCategory">
                    @Html.DisplayFor(_item =>_item[i].Category.CategoryName)
                </div>
                <div class="bookEditor">
                    @Html.DisplayFor(_item => _item[i].Editor.EditorName)
                </div>
                <div class="bookDate">
                    @Model[i].DateAdded.ToShortDateString()
                </div>
            </div>
            <div class="bookScore">
                Score: @Html.DisplayFor(_item => _item[i].Score)
            </div>
            <div class="clear"></div>
        </div>
    }
</div>

这是相关的CSS：

.linkSpan {
    width:100%;
    height:100%;
    /*top:0;*/
    /*left: 0;*/
    display: block;
    /* edit: added z-index */
    z-index: 1;
    /* edit: fixes overlap error in IE7/8, 
        make sure you have an empty gif */
    /*background-image: url('empty.gif');*/
}

.bookView {
    padding: 5px;
    margin: 5px;
    vertical-align: middle;
}

.bookView div {
    padding: 5px;
}

.bookUnit {
    clear: both;
    position: relative;
    background-color: white;
    border: 1px solid lightblue;
    z-index: 0;
}

.bookUnit:hover {
    border: 1px solid red;
}

.bookTitle {
    float: left;
    font-weight: bold;
}

.bookDetail {
    float: left;
}

.bookScore {
    float: left;
}

所以我们的目标是整个bookUnit div及其所有内容将成为一个可点击的区域，它将ID带到我的控制器方法。每个循环有20 books，但每个div都有自己的ID。

我已经尝试了anchor方法，但是它没有用......

Answer 1

实际上你现在需要包含JavaScript代码，检查this tutorial即可。

但是使用CSS代码实现这一点有一个棘手的方法您必须在div标签中嵌套锚标记，并且必须将此属性应用于它，

display:block;

当您完成此操作后，它将使整个宽度区域可以点击（但在锚标记的高度内），如果您想覆盖整个div区域，则必须准确设置锚标记的高度到div标签的高度，例如：

height:60px;

这将使整个区域可以点击，然后您可以将text-indent:-9999px应用于锚点标记以实现目标。

这非常棘手和简单，它只是使用CSS代码创建的。

这是一个example：http://jsfiddle.net/hbirjand/RG8wW/

Answer 2

如果您想使整个事物可以点击，请将click事件绑定到它。您可以使用attr()

访问其ID

$(".bookUnit").click(function(){
    var bookId = $(this).attr("id");
    //Do stuff
});

使整个父div成为可点击区域

2 个答案: