Question

我想点击DIV（文章列1）（＆＃34;这是一个矩形＆＃34;）

它应该将我重定向到另一个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>包装在一个锚元素中。

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

同时考虑SEO这是一个更好的主意

Answer 2

＆＃13;

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

＆＃13;

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

这就是我所做的：

用img

p

a

将a设置为display: block以填充宽度
从p
将该边距添加为a的填充以提高可点击性。

http://jsfiddle.net/rubpdb7d/

（我添加的CSS位于顶部）

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

5 个答案: