将整个父级div设为可点击区域

此问题可能已被多次解答，但我需要帮助，因为我无法实现我打算做的事情。将整个父级div设为可点击区域

我有这样的看法：

<div class="bookView"> 
    @for (int i = 0; i < Model.Count; i++) 
    { 
     <div class="bookUnit" onclick="[email protected]("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方法，你可以看到，但如果你想整个事情可点击的click事件绑定到它，它不工作...

来源

2014-04-02 hsim

其实你需要包括此刻的JavaScript代码，检查this tutorial这样做。

但有一个取巧的办法来实现这个使用CSS代码你必须巢您的div标签，你必须将此属性适用于它内部的锚标记，

display:block;

当你这样做，它将使整个宽度区域可点击（但在锚标签的高度内），如果要覆盖整个div区域，则必须将锚标记的高度精确设置为div标签的高度，例如：

height:60px;

这是要使整个区域c可舔，那么你可以申请text-indent:-9999px锚定标签来实现目标。

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

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

来源

2014-04-02 03:49:23 Hbirjand

。您可以attr()访问其ID：

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

来源

2014-04-02 01:30:05 David

将整个父级div设为可点击区域

回答

相关问题