Bootstrap中如何让一个 DIV 成为一个可点击的区域?
正在做一个自适应的页面, 希望将一个DIV 做成整个可以点击的区域,以便在手机上也可以随意点击而无需精确点中 ICON.
当前的 DIV 做了一些样式,故如果简单的用包住这个 div,会导致样式的更改, 比如高度与宽度无法100%,或者是我写得不对
还请指点哈.
简单说下个人的想法吧 LZ可以试试看 如果你有更好的方法 希望能分享
将icon的标签设置成一个块级元素,然后让这个标签的宽高继承他父元素的宽高,比如:
div class="outer"
a class="icon"
div
.outer {
width: 50px;
height: 100px;
}
.outer .icon {
display: block;
width: inherit;
height: inherit;
}
- 给div外层加个a标签.
- 给div绑定点击事件.
目前想到3种方法。其实也可以说是两种方法,一种方法。
- 在css中看到可点击,很容易想到 button 元素,button 中可以嵌套图片,文字,当然也可以是 div。不过需要重置一下 button 的浏览器样式。
//html:
<button type = "button" id = "btn">
<div id = "clickable"></div>
</button>
//css:
#btn {
margin: 0; padding: 0;
barder: none; outline: none;
cursor: pointer;
}
#clickable {
...
}
- a 元素也可以起到类似的作用,在 a 元素中嵌套一个 div,再用 href 指向要执行的操作。
<a href = "javascript:myFunc()">
<div id = "clickable"></div>
</a>
- 第三种方法是最直接的,直接在js中获取可点击区域,定义操作。
//js:
document.getElementById("clickable") = function(){
...
};
按题主的条件,第三种方法最合适。