ลิงก์ href สำหรับ div ทั้งหมดใน HTML / CSS

นี่คือสิ่งที่ฉันพยายามทำให้สำเร็จใน HTML / CSS:

ฉันมีรูปภาพที่มีความสูงและความกว้างต่างกัน แต่ทั้งหมดมีขนาดไม่เกิน 180x235 ดังนั้นสิ่งที่ฉันต้องการทำคือสร้างdivด้วยborderและvertical-align: middleทั้งหมด ฉันได้ทำสำเร็จว่า แต่ตอนนี้ผมติดอยู่กับวิธีการที่จะต้องมีการเชื่อมโยง href divทั้งหมด

นี่คือรหัสของฉัน:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

โปรดทราบว่าเพื่อประโยชน์ในการคัดลอกวางที่นี่ได้อย่างง่ายดายโค้ดสไตล์จะอยู่ในบรรทัด

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

ดังนั้นเพื่อสรุปอีกครั้งฉันต้องการ div ( #parentdivimage) ทั้งหมดเพื่อเป็นลิงก์ href

อัปเดต 06/10/2014: การใช้ div ภายใน a ถูกต้องตามความหมายใน HTML5

คุณจะต้องเลือกระหว่างสถานการณ์ต่อไปนี้:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

ซึ่งไม่ถูกต้องตามความหมาย แต่จะใช้งานได้

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

ซึ่งถูกต้องตามความหมาย แต่เกี่ยวข้องกับการใช้ JS

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

ซึ่งถูกต้องตามความหมายและทำงานได้ตามที่คาดไว้ แต่ไม่ใช่ div อีกต่อไป

ทำไมคุณไม่ตัด<div>องค์ประกอบออกและแทนที่ด้วย<a>แทน? เพียงเพราะแท็กจุดยึดไม่ใช่ div ไม่ได้หมายความว่าคุณไม่สามารถจัดรูปแบบได้display:blockความสูงความกว้างพื้นหลังเส้นขอบ ฯลฯ คุณสามารถทำให้มันดูเหมือน div แต่ยังทำหน้าที่เหมือนลิงก์ได้ จากนั้นคุณจะไม่พึ่งพาโค้ดที่ไม่ถูกต้องหรือ JavaScript ที่อาจไม่ได้เปิดใช้งานสำหรับผู้ใช้บางราย

ทำเช่นนี้:

Parentdivimage ควรระบุความกว้างและความสูงและตำแหน่งควรเป็น:

position: relative;

ภายใน parentdivimage ถัดจาก div อื่น ๆ ที่ parent มีคุณควรใส่:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

จากนั้นในไฟล์ css:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

แท็ก span จะกรอกข้อมูลในบล็อกหลักซึ่งเป็น parentdiv เนื่องจากความสูงและความกว้างตั้งไว้ที่ 100% Span จะอยู่ด้านบนสุดขององค์ประกอบรอบข้างทั้งหมดเนื่องจากการตั้งค่าดัชนี z สูงกว่าองค์ประกอบอื่น ๆ ช่วงสุดท้ายจะสามารถคลิกได้เนื่องจากอยู่ในแท็ก "a"

สองสิ่งที่คุณทำได้:

1. เปลี่ยน#childdivimageเป็นspanองค์ประกอบและเปลี่ยน#parentdivimageเป็นแท็กจุดยึด สิ่งนี้อาจทำให้คุณต้องเพิ่มสไตล์เพื่อให้ทุกอย่างดูสมบูรณ์แบบ สิ่งนี้ได้รับการเตรียมไว้ล่วงหน้าเนื่องจากใช้มาร์กอัปความหมายและไม่ต้องอาศัยจาวาสคริปต์

2. #parentdivimageการใช้งานจาวาสคริการผูกเหตุการณ์คลิกเพื่อ คุณต้องเปลี่ยนเส้นทางหน้าต่างเบราว์เซอร์โดยแก้ไขwindow.locationภายในเหตุการณ์นี้ นี่คือ TheEasyWay ^™แต่จะไม่ลดทอนลงอย่างสง่างาม

การออกจากสิ่งที่ Surreal Dreams กล่าวไว้อาจเป็นการดีที่สุดที่จะจัดรูปแบบแท็กจุดยึดในประสบการณ์ของฉัน แต่จริงๆแล้วมันขึ้นอยู่กับสิ่งที่คุณกำลังทำ นี่คือตัวอย่าง:

Html:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

จากนั้น CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

ทำให้divของแทนและห่อที่ในองค์ประกอบ เนื่องจากและเป็นองค์ประกอบในบรรทัดโดยค่าเริ่มต้นจึงยังคงถูกต้องในขณะที่ a เป็นองค์ประกอบระดับบล็อกดังนั้นการมาร์กอัปจึงไม่ถูกต้องเมื่ออยู่ภายในไฟล์.id="childdivimag"spanaspanimgdiva

ใส่display:blockองค์ประกอบจุดยึด และ / หรือzoom:1;

แต่คุณควรทำสิ่งนี้จริงๆ

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

สิ่งที่ฉันจะทำคือใส่ช่วงใน<a>แท็กตั้งค่าช่วงเป็นบล็อกและเพิ่มขนาดให้กับช่วงหรือใช้สไตล์กับ<a>แท็ก จัดการตำแหน่งใน<a>รูปแบบแท็กได้อย่างแน่นอน การเพิ่มonclick eventลงในa whereJavaScript จะตรวจจับเหตุการณ์จากนั้นส่งคืนเท็จในตอนท้ายของเหตุการณ์ JavaScript เพื่อป้องกันการกระทำเริ่มต้นhrefของการคลิก สิ่งนี้ใช้ได้ในกรณีที่มีหรือไม่เปิดใช้งาน JavaScript และ AJAX ใด ๆ สามารถจัดการได้ในตัวฟัง Javascript

หากคุณใช้ jQuery คุณสามารถใช้สิ่งนี้เป็นผู้ฟังของคุณและละเว้นonclickในaแท็ก

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

สิ่งนี้ช่วยให้คุณสามารถแนบผู้ฟังเข้ากับองค์ประกอบที่เปลี่ยนแปลงได้ตามความจำเป็น

นี้สามารถทำได้หลายวิธี ก. ใช้ซ้อนกันภายในแท็ก

<a href="link1.html">
   <div> Something in the div </div>
 </a>

ข. ใช้ Inline JavaScript Method

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

ค. ใช้ jQuery ภายในแท็ก

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });

ลิงค์ที่มี<div>แท็ก:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

ลิงค์ที่มี<a>แท็ก:

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>