将我重定向到另一个 HTML 页面的可点击 div

Question

我想点击 DIV（文章列1）（“这是一个矩形”）

它应该将我重定向到另一个 HTML 文档：

https://s3-us-west-1.amazonaws.com/example/the-example.html

块引用

<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>

块引用

Answer 1

在 HTML5 中，您可以将<div>包裹在一个锚元素中。
SEO明智的做法是使用 Anchor 标签而不是 JavaScript onclick处理程序：

<a href="page.html">
    <div>Yey I'm clickable</div>
</a>

PS：确保在包裹<a>没有其他锚点或动作按钮元素。

Answer 2

\n

<div onclick="window.location.href = 'http://example.com';">Click this div to get redirected.</div>

\n

Answer 3

在元素单击时操作window.location.href ：

document.querySelector('.article-column1').addEventListener('click', function(e) {
    window.location.href = 'http://example.com';
}, false);

Answer 4

用这个

<a class="article-column1" href="****link****">
    <img src ="https://s3-us-west-1.amazonaws.com/plus32med.png">
</a>

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

Answer 5

这是我所做的：

用a包裹img和p
将a设置为display: block以填充宽度
从p删除底部边距
将该边距添加为a填充以提高可点击性。

http://jsfiddle.net/rubpdb7d/

（我添加的 CSS 位于顶部）

将我重定向到另一个 HTML 页面的可点击 div

问题描述

5 个解决方案

解决方案1
7 已采纳 2014-12-31 03:05:11

解决方案2
5 2014-12-31 03:05:25

解决方案3
2 2014-12-31 03:04:25

解决方案4
1 2014-12-31 03:05:41

解决方案5
0 2014-12-31 03:09:57

将我重定向到另一个 HTML 页面的可点击 div

问题描述

5 个解决方案

解决方案1 7 已采纳 2014-12-31 03:05:11

解决方案2 5 2014-12-31 03:05:25

解决方案3 2 2014-12-31 03:04:25

解决方案4 1 2014-12-31 03:05:41

解决方案5 0 2014-12-31 03:09:57

解决方案1
7 已采纳 2014-12-31 03:05:11

解决方案2
5 2014-12-31 03:05:25

解决方案3
2 2014-12-31 03:04:25

解决方案4
1 2014-12-31 03:05:41

解决方案5
0 2014-12-31 03:09:57