ทำให้ div เป็นลิงก์

ฉันมี<div>บล็อกที่มีเนื้อหาภาพแฟนซีที่ฉันไม่ต้องการเปลี่ยน ฉันต้องการให้เป็นลิงก์แบบคลิกได้

ฉันกำลังมองหาสิ่งที่ชอบ<a href="…"><div> … </div></a>แต่นั่นคือ XHTML 1.1 ที่ถูกต้อง

มาที่นี่โดยหวังว่าจะได้พบทางออกที่ดีกว่าของฉัน แต่ฉันไม่ชอบข้อเสนอใด ๆ ที่นี่ ฉันคิดว่าคุณบางคนเข้าใจผิดคำถาม OP ต้องการทำให้ div ที่เต็มไปด้วยเนื้อหามีพฤติกรรมเหมือนลิงก์ ตัวอย่างหนึ่งก็คือโฆษณา facebook - ถ้าคุณดูมันเป็นมาร์กอัปที่เหมาะสมจริงๆ

สำหรับฉันแล้ว no-nos คือ: javascript (ไม่ควรต้องมีเพียงลิงก์และ SEO / การเข้าถึงที่ไม่ดีมาก); HTML ไม่ถูกต้อง

ในสาระสำคัญมันคือ:

• สร้างแผงของคุณโดยใช้เทคนิค CSS ปกติและ HTML ที่ถูกต้อง
• บางแห่งในนั้นใส่ลิงค์ที่คุณต้องการให้เป็นลิงค์เริ่มต้นหากผู้ใช้คลิกที่แผง (คุณสามารถมีลิงค์อื่น ๆ ได้)
• ในลิงก์นั้นให้ใส่แท็ก span ที่ว่างเปล่า ( <span></span>ไม่ใช่<span />- ขอบคุณ @Campey)
• ให้ตำแหน่งแผง: ญาติ

• ใช้ CSS ต่อไปนี้กับช่วงว่าง:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   
  

  มันจะครอบคลุมแผงและในขณะที่มันอยู่ใน<A>แท็กมันเป็นลิงค์ที่คลิกได้

• ให้ลิงค์อื่น ๆ ภายในตำแหน่งพาเนล: สัมพัทธ์และดัชนี z ที่เหมาะสม (> 1) เพื่อนำมาไว้ด้านหน้าลิงก์เริ่มต้น

คุณไม่สามารถสร้างdivลิงก์เองได้ แต่คุณสามารถทำให้<a>แท็กเป็นแบบblockเดียวกับที่<div>มี

a {
    display: block;
}

จากนั้นคุณสามารถตั้งค่าความกว้างและความสูงได้

นี่เป็นคำถามโบราณ แต่ฉันคิดว่าฉันจะตอบเพราะทุกคนที่นี่มีวิธีแก้ปัญหาที่บ้า จริงๆแล้วมันง่ายมาก ...

แท็กสมอทำงานเช่นนี้ -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

แม้ว่าฉันจะไม่แน่ใจว่าสิ่งนี้ถูกต้องหรือไม่ หากนั่นคือเหตุผลในการแก้ปัญหาที่พูดฉันขอโทษ ...

ต้องมีจาวาสคริปต์เล็กน้อย แต่คุณdivจะคลิกได้

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

ตัวเลือกนี้ไม่ต้องการ empty.gif เช่นเดียวกับคำตอบ upvoted ที่สุด:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

ตามที่เสนอที่http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

นี่คือทางออกที่ "ถูกต้อง" เพื่อให้ได้สิ่งที่คุณต้องการ

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

แต่ส่วนใหญ่แล้วสิ่งที่คุณต้องการคือให้<a>แท็กแสดงเป็นองค์ประกอบระดับบล็อก

ฉันจะไม่แนะนำให้ใช้ JavaScript เพื่อจำลองการเชื่อมโยงหลายมิติซึ่งเป็นการเอาชนะจุดประสงค์ของการตรวจสอบความถูกต้องของมาร์กอัพซึ่งท้ายที่สุดก็คือการส่งเสริมการเข้าถึง (การเผยแพร่เอกสารที่มีรูปแบบที่ดีตามกฎทางความหมายที่เหมาะสม

มันจะดีกว่าที่จะเผยแพร่หน้าเว็บที่ไม่ได้ตรวจสอบ แต่แสดงผลและการทำงานอย่างถูกต้องในเบราว์เซอร์ทั้งหมดรวมถึงคนที่มีการปิดการใช้งาน JavaScript นอกจากนี้การใช้onclickไม่ได้ให้ข้อมูลความหมายสำหรับโปรแกรมอ่านหน้าจอเพื่อตรวจสอบว่า div ทำงานเป็นลิงก์

วิธีที่สะอาดที่สุดคือการใช้ jQuery กับ data-tags ที่แนะนำใน HTML ด้วยโซลูชันนี้คุณสามารถสร้างลิงก์ในทุกแท็กที่คุณต้องการ ก่อนกำหนดแท็ก (เช่น div) ด้วยแท็ก data-link:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

ตอนนี้คุณสามารถจัดสไตล์ div ได้ตามที่คุณต้องการ และคุณต้องสร้างสไตล์สำหรับ "ลิงก์" - พฤติกรรมที่เหมือนกัน:

[data-link] {
  cursor: pointer;
}

และในที่สุดก็นำ jQuery นี้ไปที่หน้า:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

ด้วยรหัสนี้ jQuery จะใช้ฟังการคลิกกับทุกแท็กในหน้าซึ่งมีแอตทริบิวต์ "data-link" และเปลี่ยนเส้นทางไปยัง URL ซึ่งอยู่ในแอตทริบิวต์ data-link

ไม่แน่ใจว่าสิ่งนี้ถูกต้องหรือไม่ แต่มันก็ใช้ได้สำหรับฉัน

รหัส :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

เพื่อให้คำตอบของผู้พูดใช้งานได้ใน IE 7 และส่งต่อต้องได้รับการปรับแต่งเล็กน้อย

1. IE จะไม่ให้เกียรติดัชนี z หากองค์ประกอบนั้นไม่มีพื้นหลังสีดังนั้นการเชื่อมโยงจะไม่ทับซ้อนส่วนต่างๆของ div ที่ประกอบด้วยเนื้อหาส่วนที่ว่างเปล่าเท่านั้น เพื่อแก้ไขพื้นหลังนี้จะถูกเพิ่มด้วยความทึบ 0

2. ด้วยเหตุผลบางประการ IE7 และโหมดความเข้ากันได้ต่างๆล้มเหลวอย่างสมบูรณ์เมื่อใช้การขยายในวิธีการเชื่อมโยง อย่างไรก็ตามถ้าลิงค์นั้นได้รับสไตล์มันก็ใช้ได้

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

คุณสามารถลองยึดสมอจากนั้นหมุนความสูงและความกว้างให้เหมือนกันกับพาเรนต์ มันใช้งานได้ดีสำหรับฉันอย่างสมบูรณ์

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

ทำไมจะไม่ล่ะ? use <a href="bla"> <div></div> </a>ทำงานได้ดีใน HTML5

โพสต์นี้เก่าฉันรู้ แต่ฉันต้องแก้ไขปัญหาเดียวกันเพราะเพียงแค่เขียนแท็กลิงก์ปกติที่มีชุดการแสดงผลเป็นบล็อกไม่ได้ทำให้ div ทั้งหมดคลิกได้ใน IE ดังนั้นเพื่อแก้ไขปัญหานี้ง่ายกว่าการใช้ JQuery

ประการแรกให้เราเข้าใจว่าทำไมสิ่งนี้จึงเกิดขึ้น: IE จะไม่ทำให้ div ที่ว่างเปล่าสามารถคลิกได้เพียง แต่ทำให้ข้อความ / ภาพภายใน div / tag นั้นสามารถคลิกได้

วิธีแก้ปัญหา: เติม div ด้วยภาพ bakground และซ่อนจากมุมมอง

อย่างไร? คุณถามคำถามที่ดีตอนนี้ฟัง เพิ่มสไตล์ backround นี้ไปยังแท็ก

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

และที่นั่นคุณก็สามารถ div ทั้งหมดสามารถคลิกได้แล้ว นี่เป็นวิธีที่ดีที่สุดสำหรับฉันที่ทำให้ฉันใช้ Photo Gallery ของฉันเพื่อให้ผู้ใช้คลิกบนครึ่งหนึ่งของภาพเพื่อเลื่อนไปทางซ้าย / ขวาจากนั้นวางภาพขนาดเล็กเช่นเดียวกับเอฟเฟ็กต์ภาพ ดังนั้นสำหรับฉันฉันใช้ภาพซ้ายและขวาเป็นภาพพื้นหลังต่อไป!

เพียงแค่มีลิงค์ในบล็อกและปรับปรุงด้วย jquery มันลดระดับลงอย่างสมบูรณ์ 100% สำหรับทุกคนที่ไม่มี javascript การทำเช่นนี้ด้วย html ไม่ใช่วิธีที่ดีที่สุด ตัวอย่างเช่น:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

จากนั้นใช้ jquery เพื่อให้สามารถคลิกบล็อกได้ (ผ่านกำแพงนักออกแบบเว็บไซต์ ):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

สิ่งที่คุณต้องทำคือเพิ่มสไตล์เคอร์เซอร์ให้กับ div

    #div_link:hover {cursor: pointer;}

สำหรับคะแนนโบนัสใช้รูปแบบเหล่านี้เฉพาะเมื่อเปิดใช้งานจาวาสคริปต์โดยการเพิ่มคลาส 'js_enabled' ให้กับ div หรือเนื้อหาหรืออะไรก็ตาม

ตัวอย่างนี้ใช้ได้สำหรับฉัน:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

สิ่งนี้ใช้ได้กับฉัน:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

สิ่งนี้จะเพิ่มองค์ประกอบที่มองไม่เห็น (การขยาย) ซึ่งครอบคลุม div ทั้งหมดของคุณและอยู่เหนือ div ทั้งหมดของคุณในดัชนี z ดังนั้นเมื่อมีคนคลิกที่ div นั้นการคลิกจะถูกดักจับโดยเลเยอร์ "span" ที่มองไม่เห็นของคุณ มีการเชื่อมโยง

หมายเหตุ: หากคุณใช้ดัชนี z สำหรับองค์ประกอบอื่น ๆ อยู่แล้วเพียงตรวจสอบให้แน่ใจว่าค่าของดัชนี z นี้สูงกว่าสิ่งที่คุณต้องการให้วาง "ด้านบน" ของ

ที่จริงคุณต้องรวมรหัส JavaScript ในขณะที่การตรวจสอบการกวดวิชานี้จะทำเช่นนั้น

แต่มีวิธีที่ยุ่งยากในการทำสิ่งนี้โดยใช้โค้ด CSS คุณต้องซ้อนแท็กจุดยึดไว้ในแท็ก div ของคุณและคุณต้องใช้คุณสมบัตินี้กับแท็ก

display:block;

เมื่อคุณทำเสร็จแล้วมันจะทำให้พื้นที่ความกว้างทั้งหมดสามารถคลิกได้ (แต่ภายในความสูงของแท็กจุดยึด) หากคุณต้องการครอบคลุมพื้นที่ div ทั้งหมดคุณต้องตั้งค่าความสูงของแท็กจุดยึดให้ตรงกับความสูงของ แท็ก div เช่น:

height:60px;

นี่จะทำให้คลิกได้ทั้งพื้นที่จากนั้นคุณสามารถนำtext-indent:-9999pxไปใช้กับจุดยึดแท็กเพื่อให้บรรลุเป้าหมาย

นี่เป็นเรื่องยุ่งยากและเรียบง่ายและมันเพิ่งสร้างขึ้นโดยใช้รหัส CSS

นี่คือตัวอย่าง : http://jsfiddle.net/hbirjand/RG8wW/

นี่เป็นวิธีที่ดีที่สุดในการทำตามที่ใช้บนเว็บไซต์ BBC และ Guardian:

ฉันพบเทคนิคที่นี่: http://codepen.io/IschaGast/pen/Qjxpxo

นี่คือ html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

นี่คือ CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

งานนี้สำหรับฉัน:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

คุณสามารถให้ลิงค์กับ div ของคุณโดยวิธีการดังต่อไปนี้:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

คุณสามารถสร้างองค์ประกอบล้อมรอบด้วยแท็ก href หรือคุณสามารถใช้ jquery และใช้

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

นี่เป็นวิธีที่ง่ายที่สุด

บอกว่านี่คือdivบล็อกที่ฉันต้องการให้คลิกได้:

<div class="inner_headL"></div>

ดังนั้นใส่hrefดังต่อไปนี้:

<a href="#">
 <div class="inner_headL"></div>
</a>

เพียงพิจารณาdivบล็อกเป็นองค์ประกอบ html ปกติและเปิดใช้งานhrefแท็ก ปกติ
มันทำงานบน FF อย่างน้อย

ในขณะที่ฉันไม่แนะนำให้ทำสิ่งนี้ไม่ว่ากรณีใด ๆ นี่คือรหัสบางส่วนที่ทำให้ DIV เป็นลิงก์ (หมายเหตุ: ตัวอย่างนี้ใช้ jQuery และมาร์กอัปบางอย่างถูกลบออกเพื่อความเรียบง่าย):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

ตัวเลือกที่ไม่ได้กล่าวถึงคือการใช้ดิ้น โดยนำflex: 1ไปใช้กับaแท็กจะขยายเพื่อให้พอดีกับภาชนะ

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

ฉันดึงตัวแปรเพราะค่าบางอย่างในลิงค์ของฉันจะเปลี่ยนไปขึ้นอยู่กับว่าผู้ใช้มาจากไหน สิ่งนี้ใช้สำหรับการทดสอบ:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

และสิ่งนี้ก็ใช้ได้เช่นกัน:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

กางเกงที่ฉลาดของฉันตอบ:

"Evasive answer to:" วิธีสร้างองค์ประกอบระดับบล็อกให้เป็นการเชื่อมโยงหลายมิติและตรวจสอบใน XHTML 1.1 "

เพียงแค่ใช้ HTML5 DOCTYPE DTD "

ไม่ได้ถือจริงสำหรับ IE7

onclick="location.href='page.html';"

ใช้งานได้กับ IE7-9, Chrome, Safari, Firefox,

ถ้าเพียงแค่ทุกอย่างอาจเป็นแบบนี้ ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

แค่คิดนอกกรอบหน่อย ;-)