javascript 将我重定向到另一个 HTML 页面的可点击 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27715582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clickable div that redirect me to another HTML page
提问by AziCode
I would like to click on the DIV (article-column1) ("which is a rectangle")
我想点击 DIV（文章列1）（“这是一个矩形”）
and it should redirect me to another HTML document:
它应该将我重定向到另一个 HTML 文档：
https://s3-us-west-1.amazonaws.com/example/the-example.html
https://s3-us-west-1.amazonaws.com/example/the-example.html
Blockquote
块引用
<style>
#content1 {
width: 70%;
overflow: auto;
margin: 4% 0% 0% 23%;
padding-left: 6%;
}
#content1 div {
float: left;
width:27%;
height:20%;
background-color: #efefef;
margin: 1% 3% 2% 0%;
padding: 2% 2% 1% 2%;
text-align: center;
}
#content1 p {
color:#f91d04;
}
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column2 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column3{
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.article-column4 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
</style>
<body>
<div id="content1">
<div class="article-column1">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
<p>New Workout</a></p>
</div>
<div class="article-column2">
<img src = "https://s3-us-west-1.amazonaws.com/clock61.png">
<p>History</p>
</div>
<div class="article-column3">
<img src = "https://s3-us-west-1.amazonaws.com/money57.png">
<p>Graph</p>
</div>
<div class="article-column4">
<img src = "https://s3-us-west-1.amazonaws.com/play11.png">
<p>video</p>
</div>
</div>
</body>
Blockquote
块引用
回答by Roko C. Buljan
in HTML5 you can wrapyour <div>inside an anchorelement.
SEO-wise is always better to use an Anchor tag instead of JavaScript onclickhandlers:
在 HTML5 中，您可以将您<div>的内容包裹在一个锚元素中。
SEO明智的做法是使用 Anchor 标签而不是 JavaScriptonclick处理程序：
<a href="page.html">
<div>Yey I'm clickable</div>
</a>
PS:make sure to nothave other anchor or action button elements within the wrapping <a>.
PS：确保包装内没有其他锚点或动作按钮元素<a>。
回答by Drazzah
<div onclick="window.location.href = 'http://example.com';">Click this div to get redirected.</div>回答by Leo
Manipulate window.location.hrefon element click:
操作window.location.href元素点击：
document.querySelector('.article-column1').addEventListener('click', function(e) {
window.location.href = 'http://example.com';
}, false);
回答by MegaMind
use this
用这个
<a class="article-column1" href="****link****">
<img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
</a>
and CSS
和 CSS
.article-column1 {
-moz-box-shadow: -5px 5px 29px #777777;
-webkit-box-shadow: -5px 5px 29px #777777;
box-shadow: -5px 5px 29px #777777;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display : block;
}
回答by microtony
Here's what I have done:
这是我所做的：
- Wrap the
imgandpwitha - Set the
atodisplay: blockto fill up the width - Remove the bottom margin from
p - Add that margin as padding of
ato improve clickability.
- 包裹
img并p用a - 将
a要display: block填补的宽度 - 删除底部边距
p - 添加该边距作为填充
a以提高可点击性。
(CSS I added are at the top)
（我添加的 CSS 位于顶部）
