如何使整个“div”可点击的HTML和CSS没有JavaScript?

我想要这样做,整个div是可点击的,并链接到另一个页面时,没有JavaScript和有效的代码/标记点击。

如果我有这个是我想要的结果做的 –

<a href="#"> <div>This is a link</div> </a> 

W3Cvalidation器说,块元素不应放在内联元素中。 有没有更好的方法来做到这一点?

整个div链接到另一个页面时,没有JavaScript和有效的代码点击,这可能吗?

迂回的答案:不。

正如你已经提出了另一个评论,嵌套a标签内的div是无效的。

然而,没有什么能够阻止你使a标签的行为与div非常相似,除了你不能在其中嵌套其他块标签。 如果它适合你的标记,在你a标签上设置display:block ,然后按照你的喜好设置大小/浮动。

如果你违背了你的问题的前提,你需要避免JavaScript,正如其他人指出,我们可以使用onClick事件处理程序。 jQuery是使这个易于维护的stream行select。

有可能使一个链接填充整个div,使div的可点击的外观。

CSS:

 #my-div { background-color: #f00; width: 200px; height: 200px; } a.fill-div { display: block; height: 100%; width: 100%; text-decoration: none; } 

HTML:

 <div id="my-div"> <a href="#" class="fill-div"></a> </div> 
 <div onclick="location.href='#';" style="cursor: pointer;"> </div> 

没有JS,我是这样做的:

我的HTML:

 <div class="container"> <div class="sometext">Some text here</div> <div class="someothertext">Some other text here</div> <a href="#" class="mylink">text of my link</a> </div> 

我的CSS:

 .container{ position: relative; } .container.a{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-indent: -9999px; //these two lines are to hide my actual link text. overflow: hidden; //these two lines are to hide my actual link text. } 

我的解决scheme没有JavaScript /图像。 只使用CSS。 它适用于所有浏览器。

HTML:

 <a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!"> buy now<br />free shipping<br />no further costs </a> 

CSS:

 .add_to_cart:hover { background-color:#FF9933; text-decoration:none; color:#FFFFFF; } .add_to_cart { cursor:pointer; background-color:#EC5500; display:block; text-align:center; margin-top:8px; width:90px; height:31px; border-radius:5px; border-width:1px; border-style:solid; border-color:#E70000; } 

https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php上有一个示例;

在锚中嵌套块级元素在HTML5中不再是无效的 。 请参阅http://html5doctor.com/block-level-links-in-html-5/和http://www.w3.org/TR/html5/the-a-element.html 。 我不是说你应该使用它,但是在HTML5中使用<a href="#"><div></div></a>是很好的。

接受的答案否则是最好的答案。 像其他人一样使用JavaScript也是不好的,因为它会使“链接” 无法访问 (对没有JavaScript的用户,包括search引擎和其他人)。

jQuery将允许你这样做。

查看click()函数: http : //api.jquery.com/click/

例:

 $('#yourDIV').click(function() { alert('You clicked the DIV.'); }); 

那么你可以添加<a></a>标签,并将div放在它里面,如果你希望div作为一个链接来添加一个href。 或者只是使用JavaScript并定义一个“OnClick”函数。 但是从所提供的有限信息来看,确定问题的背景有点困难。

像这样的东西?

 <div onclick="alert('test');"> </div> 

AFAIK你至less需要一点点的JavaScript …

我会build议使用jQuery 。

您可以将此库包含在一行中。 然后你可以访问你的div

 $('div').click(function(){ // do stuff here }); 

并响应点击事件。

我们正在使用这样的

  <label for="1"> <div class="options"> <input type="radio" name="mem" id="1" value="1" checked="checked"/>option one </div> </label> <label for="2"> <div class="options"> <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two </div></label> 

运用

  <label for="1"> 

标签和捕获是与

 id=1 

希望这可以帮助。

 .clickable { cursor:pointer; }