একটি লিঙ্কে একটি ডিভ করুন

Question

আমার <div>কিছু অভিনব ভিজ্যুয়াল সামগ্রী রয়েছে যা আমি পরিবর্তন করতে চাই না with আমি এটিকে একটি ক্লিকযোগ্য লিঙ্ক তৈরি করতে চাই।

আমি এর মতো কিছু খুঁজছি <a href="…"><div> … </div></a>, তবে এটি বৈধ এক্সএইচটিএমএল 1.1।

Comments

একটি ভাল কারণ

— ডিভের

সর্বাধিক ভোট দেওয়া উত্তরের ভিত্তিতে আমার একটি ভাল কাজের উদাহরণ রয়েছে। মূর্খতা এখানে দেখুন

— মাইক 16

এইচটিএমএল 5 এ এটির divঅধীনে থাকা পুরোপুরি বৈধ a।

— জুয়ান এ নাভারো

Answer 1

আমার যে আরও ভাল সমাধান সন্ধানের আশায় এখানে এসেছিল, তবে আমি এখানে অফারের যে কোনওটিকে পছন্দ করি না। আমি মনে করি আপনারা কেউ কেউ প্রশ্নটি ভুল বুঝেছেন। ওপি একটি লিঙ্কের মতো আচরণ করে একটি ডিভি পূর্ণ উপাদান তৈরি করতে চায়। এর একটি উদাহরণ ফেসবুক বিজ্ঞাপন হতে পারে - আপনি যদি তাকান তবে সেগুলি আসলে সঠিক মার্কআপ।

আমার জন্য কোনও নম্বর নেই: জাভাস্ক্রিপ্ট (কেবল কোনও লিঙ্কের জন্য প্রয়োজন হবে না এবং খুব খারাপ এসইও / অ্যাক্সেসিবিলিটি হওয়া উচিত); অবৈধ এইচটিএমএল।

সংক্ষেপে এটি:

• সাধারণ সিএসএস কৌশল এবং বৈধ এইচটিএমএল ব্যবহার করে আপনার প্যানেল তৈরি করুন।
• কোথাও কোথাও একটি লিঙ্ক রেখেছেন যে ব্যবহারকারী প্যানেলে ক্লিক করলে আপনি ডিফল্ট লিঙ্ক হতে চান (আপনার অন্যান্য লিঙ্কগুলিও থাকতে পারে)।
• এই লিঙ্কটির ভিতরে একটি ফাঁকা স্প্যান ট্যাগ লাগান ( <span></span>না <span />- ধন্যবাদ @ ক্যাম্পিকে)
• প্যানেল অবস্থান দিন: আপেক্ষিক

• খালি স্প্যানে নিম্নলিখিত সিএসএস প্রয়োগ করুন:

  { 
    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>ট্যাগের অভ্যন্তরে এটি একটি ক্লিকযোগ্য লিঙ্ক

• প্যানেল অবস্থানে অন্য যে কোনও লিঙ্ক দিন: আপেক্ষিক এবং উপযুক্ত জেড-সূচক (> 1) এগুলি ডিফল্ট স্প্যান লিঙ্কের সামনে আনতে

Comments

ধন্যবাদ ভাল কাজ করে। আইই 8-তে যদি জিনিসগুলি মারাত্মকভাবে ভেঙে যায় (যেমন তারা আমার জন্য করেছে), খালি স্প্যান (<স্প্যান ... />) এর পরিবর্তে আপনার খোলার এবং ক্লোজিং স্প্যান ট্যাগ (<স্প্যান ...> </span>) রয়েছে তা নিশ্চিত করুন make )।

— ক্যাম্পে

কোডটি আইই / / ৮-তে পুরোপুরি কাজ করে না, অন্যান্য উপাদানগুলি যা নির্বাচনের যোগ্য তা <a><span></span></a>উপাদানটির চেয়ে বেশি । জেন-ইনডেক্স সেট করা থাকলেও ধারকটির অভ্যন্তরের চিত্র এবং পাঠগুলি লিঙ্ক করবে না।

— Spoike

আমার মতো নির্বোধ এবং কিছু ভুল পড়ে এমন লোকদের জন্য একটি বেদনাটি

— আলেকজমা

আপনি IE9 এ চেষ্টা করেছেন? আমি এই পদ্ধতিটি পছন্দ করি এবং আমি এটি ব্যবহার করছি তবে আমি কেবল এটি9 (@ অ্যালেক্সমা থেকে প্রাপ্ত ফিডাল সহ) আই 9 তে পরীক্ষা করেছি এবং আমি যা দেখছি তা হ'ল আপনি পাঠ্যের ডিভিস এক্সপেক্টে যে কোনও জায়গায় ক্লিক করতে পারেন। আপনি যখন পাঠ্যের উপরে ঘোরাফেরা করেন, কার্সারটি একটি মানক পাঠ্য কার্সারে পরিবর্তিত হয় এবং আপনি যখন পাঠ্যে ক্লিক করেন তখন কিছুই হয় না। ব্যবহারকারীরা যেমন পাঠ্য উপাদানগুলিতে ক্লিক করার প্রবণতা রয়েছে (এবং যখন পাঠ্য উপাদানগুলি ডিভের বেশিরভাগ অংশ পূরণ করে), এটি আইই 9 তে এই সমাধানটিকে অকেজো করে তোলে। অন্য কেউ এর অভিজ্ঞতা পেয়েছে নাকি এর সমাধান আছে?

— বিগম্যাক

কেউ কীভাবে থাকতে পারে তা জানেন: এই সমাধানটির সাথে সিএসএস-এর কাজ করুন সম্ভবত উত্তর মধ্যে রাখা উত্তর উল্লেখ করে?

— nktokyo

Answer 2

আপনি করতে পারবেন না divএকটি লিঙ্ক নিজেই, তবে আপনি একটি করতে পারেন <a>হিসেবে ট্যাগ আইন block, একই আচরণ <div>করেছে।

a {
    display: block;
}

তারপরে আপনি প্রস্থ এবং উচ্চতা সেট করতে পারেন।

Comments

তবে এটি কোনও লিঙ্কে 'ডিভ' তৈরি করে না। এটি একটি ব্লক উপাদানটিতে একটি লিঙ্ক তৈরি করে। এটি কিছুটা আলাদা।

— jjnguy

এটি আপনার সমস্যার সমাধান। যেহেতু আপনি ডিআইভি সংশোধন করতে পারেন হাইপারলিংকের মতো ক্লিক করা যেতে পারে, তবে আপনি সমস্ত ব্রাউজারে প্রদর্শনের জন্য কার্সার (= হাত) সেট করতে পারবেন না (কেবলমাত্র এটিই সমর্থন করে!)।

— সোল_মাস্টার

jjnguy: কেমন? আমি একটি লিঙ্কে প্রচুর সামগ্রী থাকা অপছন্দ করি, তবে এটি ঠিক তেমন কোনও নেভিগেশন মেনু বা এর মতো কিছু অংশও হতে পারে। একটি অ্যাঙ্কর উপাদান (<a>) অগত্যা সরল পাঠ্য হওয়া দরকার না, তাই না? কোন উপায়ে এটি একটি ব্লক করা ভুল ? এটি শব্দার্থগতভাবে সঠিক এবং এটি আপনার ইচ্ছা হিসাবে এটি প্রদর্শন করতে ব্যবহার করা যেতে পারে।

— Systad

এটি একটি অস্পষ্ট প্রশ্নের পুরোপুরি বৈধ সমাধান। আপনি আসলে একটি ডিভের চারপাশে কেবল একটি অ্যাঙ্কর উপাদানটি আবদ্ধ করতে পারেন তবে এটি শব্দার্থগতভাবে ভুল হবে। (ইনলাইন উপাদানের মধ্যে উপাদান ব্লক করুন)।

— ট্রেনিংমার 18

jjnguy: এটি বেশ সাধারণ অনুশীলন। আমি লিংকগুলির সাথে ডিভগুলি প্রতিস্থাপন করতে বলছি না, তবে প্রশ্নের শব্দে তিনি কেবল একটি ব্লক চেয়েছিলেন যা তিনি বোতাম বা কোনও কিছুর মতো ক্লিক করতে পারেন।

— সোভিয়েট

Answer 3

এটি একটি প্রাচীন প্রশ্ন, তবে আমি ভেবেছিলাম যে আমি এর উত্তর দেব কারণ এখানে প্রত্যেকেরই কিছু পাগল সমাধান রয়েছে। এটি আসলে খুব সহজ ...

একটি অ্যাঙ্কর ট্যাগ এর মতো কাজ করে -

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

Sooo ...

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

যদিও আমি নিশ্চিত নই যে এটি বৈধ কিনা। যদি এটি কথ্য সমাধানগুলির পিছনে যুক্তি হয় তবে আমি ক্ষমা চাই ...

Comments

এটি বৈধ এইচটিএমএল যতক্ষণ <div>না এতে কোনও ইন্টারেক্টিভ সামগ্রী (অন্যান্য <a>উপাদান, <button>উপাদান ইত্যাদি) থাকে না।

আপনার উদাহরণ বৈধ এইচটিএমএল নয় - কোনও ইনলাইন উপাদানটিতে থাকা ব্লক উপাদান - আপনি যদি HTML5 ব্যবহার করেন না , যা লিঙ্কগুলির জন্য ব্যতিক্রম করে।

— thepeer

এটি একটি খারাপ উদাহরণ, কারণ aট্যাগ যা করে তা সমস্ত পাঠ্যকে divএকটিতে নিয়ে যায় এবং এটি আন্ডারলাইন করে ... স্টাইলিংয়ের মাধ্যমে এটি প্রশমিত করা যেতে পারে তবে শীর্ষের উত্তরটি আরও ভাল।

— দিমিত্রি নেস্টারুক

a #thediv{font-weight:normal;text-decoration:none;}আপনার প্রয়োজন সমস্ত স্টাইল অনুসারে।

— tyjkenn

এটি চেষ্টা করে এবং এটি কাজ করে, তবে এটি উপাদানটির অবস্থান ভঙ্গ করে। হ্যাঁ ডক্টাইপটি ক্রোমে HTML5 (কিছু 2014 সংস্করণ) ..

— বার 1

Answer 4

একটু জাভাস্ক্রিপ্ট দরকার। তবে, আপনার divক্লিকযোগ্য হবে।

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

Comments

পৃষ্ঠায় খারাপ শব্দার্থতন্ত্রের ফলাফল যদিও, তাই প্রযুক্তিগতভাবে সম্ভব হলেও আমি এটিকে এড়াতে চাই।

— Systad

আমি এই সমাধানটি ব্যবহার করার বিষয়ে ভেবেছিলাম, তবে এটি এক ধরনের কুৎসিত। আমি ডিসপ্লে জড়িত সমাধানগুলি পছন্দ করি: আরও ভাল ব্লক করুন।

— অ্যালিউরকোড

এটি দেখতে কোনও লিঙ্কের মতো তবে সত্যিকারের লিঙ্ক নয়। এটির তীব্র ব্যবহারযোগ্যতা এবং অ্যাক্সেসযোগ্যতার সমস্যা রয়েছে এবং এটি একটি সত্যই বাজে সমাধান।

— নটহাগো

সবচেয়ে ভালো সমাধান. আমাদের কেবল স্ক্রিপ্ট চালানো এবং এটিতে "এটি" প্রেরণ করা দরকার।

— আরমান হায়োটস

যদি তারা জেএস না করে থাকে তবে আপনি কার্যকারিতা হারিয়ে ফেলেছেন। পাশাপাশি এসইওর জন্য খারাপ।

— বার

Answer 5

সর্বাধিক উত্সাহিত উত্তরের মতো এই বিকল্পটির জন্য খালি.gif প্রয়োজন হয় না:

এইচটিএমএল:

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

সিএসএস:

 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/ এ প্রস্তাবিত

Comments

ধন্যবাদ! ক্রিস জুমনভিলির সমাধান অ্যান্ড্রিওড এবং আইফোন উভয় ক্ষেত্রেই দুর্দান্ত কাজ করছে। উদাহরণ: গ্যাস্টেটপার্কস.অর্গ

— লরেন

এটা হতে না করা উচিত div.feature > aধরো যদি "অন্যান্য সমস্ত কিছু" অংশ একটি লিংক মধ্যে গভীর গোপন রয়েছে?

— TWiStErRob

এটিই বেছে নেওয়া উচিত উত্তর, বুটস্ট্র্যাপের সাথেও কাজ করে

— অ্যান্থনি কাল

Answer 6

আপনি যা চান তা অর্জনের এটি একটি "বৈধ" সমাধান।

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

তবে সম্ভবত আপনি যা চান তা হ'ল <a>একটি ব্লক স্তরের উপাদান হিসাবে ট্যাগ প্রদর্শন করা।

আমি একটি হাইপারলিংক অনুকরণের জন্য জাভাস্ক্রিপ্ট ব্যবহার করার পরামর্শ দেব না কারণ এটি মার্কআপের বৈধতার উদ্দেশ্যকে পরাস্ত করে, যা শেষ পর্যন্ত অ্যাক্সেসিবিলিটি প্রচার করে (সঠিক শব্দার্থবিজ্ঞানের নীচে সঠিকভাবে গঠিত ডকুমেন্টগুলি প্রকাশের সম্ভাবনা হ্রাস করে একই ডকুমেন্টটি বিভিন্ন ব্রাউজারগুলির দ্বারা আলাদাভাবে ব্যাখ্যা করা হবে)।

এমন কোনও ওয়েব পৃষ্ঠা প্রকাশ করা ভাল যা বৈধতা দেয় না তবে জাভাস্ক্রিপ্ট অক্ষমকৃত সমস্ত ব্রাউজারগুলিতে যথাযথভাবে রেন্ডার এবং কাজ করে । তদ্ব্যতীত, onclickডিভটি কোনও লিঙ্ক হিসাবে কাজ করছে তা নির্ধারণ করতে কোনও স্ক্রিন পাঠকের জন্য অর্থপূর্ণ তথ্য সরবরাহ করে না।

Answer 7

সবচেয়ে পরিষ্কার উপায় হ'ল এইচটিএমএলে প্রবর্তিত ডেটা-ট্যাগগুলির সাথে jQuery ব্যবহার করা। এই সমাধানের সাহায্যে আপনি প্রতিটি ট্যাগে একটি লিঙ্ক তৈরি করতে পারেন। প্রথমে ডেটা-লিংক ট্যাগের সাহায্যে ট্যাগটি নির্ধারণ করুন (উদাহরণস্বরূপ Div):

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

আপনি এখন চাইলেও ডিভ স্টাইল করতে পারবেন। এবং আপনাকে "লিঙ্ক" -আলাইক আচরণের জন্য স্টাইলও তৈরি করতে হবে:

[data-link] {
  cursor: pointer;
}

এবং শেষ পর্যন্ত এই jQuery কল পৃষ্ঠাতে রাখুন:

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

এই কোড সহ jQuery পৃষ্ঠার প্রতিটি ট্যাগে একটি ক্লিক শ্রোতার প্রয়োগ করে যার একটি "ডেটা-লিঙ্ক" বৈশিষ্ট্য রয়েছে এবং ইউআরএলটিতে যা ডেটা-লিঙ্কের বৈশিষ্ট্যে রয়েছে পুনঃনির্দেশ করে।

Comments

ডেটা-অ্যাট্রিবিউট সম্পর্কে তথ্য পেতে দেখুন: ejohn.org/blog/html-5-data-attributes

— এরহার্ড দিনহবল

Answer 8

এটি বৈধ কিনা নিশ্চিত না তবে এটি আমার পক্ষে কাজ করে।

কোড :

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

Answer 9

আইপি 7 এবং সামনের দিকে পাঠকের উত্তরটির কাজ করতে, এটির জন্য কয়েকটি টুইট দরকার।

1. উপাদানটির কোনও ব্যাকগ্রাউন্ড-রঙ না থাকলে IE জেড-সূচককে সম্মান করবে না, সুতরাং লিঙ্কটি কন্টিগ ডিভের অংশগুলিকে ওভারল্যাপ করবে না, কেবল ফাঁকা অংশ। এটি ঠিক করতে অপেক্ষাকৃত 0 দিয়ে একটি পটভূমি যুক্ত করা হয়।

2. কোনও কারণে আই 7 এবং বিভিন্ন সামঞ্জস্যতা মোড সম্পূর্ণরূপে ব্যর্থ হয় যখন কোনও লিঙ্ক পদ্ধতির স্প্যানটি ব্যবহার করা হয়। তবে লিঙ্কটি যদি স্টাইল দেওয়া হয় তবে এটি ঠিক কাজ করে।

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

Answer 10

আপনি একটি অ্যাঙ্কর মোড়ানো দিয়েও চেষ্টা করতে পারেন, তারপরে তার দৈর্ঘ্য এবং প্রস্থকে একইরূপে পরিণত করতে পারেন। এটি আমার পক্ষে নিখুঁতভাবে কাজ করে।

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

Comments

আপনি এটিও নিশ্চিত করতে চাইতে পারেন যে পিতামাতার ডিভের শূন্য প্যাডিং রয়েছে এবং <a> ট্যাগের শূন্য মার্জিন রয়েছে।

— নীলপো

Answer 11

কেন না? use <a href="bla"> <div></div> </a>এইচটিএমএল 5 এ কাজ করে

Comments

এটি এইচটিএমএল বৈধতা পাস করবে না। লাইন আইটেম ব্লক আইটেম সংরক্ষণ করতে পারে না।

— ক্রিজিসটফ ট্রজস

মানে, এটি <div><span></span></div>বৈধ এবং <span><div></div></span>না। আপনার display: inline;আইটেমের মধ্যে ধরণের আইটেম রাখা উচিত নয় display: block;। <a>ট্যাগ ইনলাইন বাক্স।

— ক্রিজিসটফ ট্রাজস

হ্যাঁ, এটি কাজ করতে পারে, কারণ আপনি এটি একাধিক উপায়ে করতে পারেন (আরও ভাল বা খারাপ)। পুরানো এইচটিএমএল বৈধতা :) এই নির্দিষ্ট সমাধানটি ভাল কারণ নয়।

— ক্রিজিসটফ ট্রাজস

"পুরানো এইচটিএমএল বৈধতা" এটি পাস করে না তাতে কী फरक আসে? এটি এখনই অনুমোদিত, এইচটিএমএল 5 এবং কোনও কারণে তাই কেন এটি ব্যবহার করবেন না? আমি মনে করি যে এই সমাধানটি ঠিক আছে (এটি প্রায়শই ডিভ সামগ্রীগুলিতে আন্ডারলাইন সরানো প্রয়োজন তবে এখনও)।

— টোডিলো

@ টডিলো কারণ <a><div></div></a>বৈধ এবং কাজ করার সময় , বৈধ নয় এবং কাজ <a><div><a></a></div></a>করে না।

— coredumperror

Answer 12

এই পোস্টটি আমি পুরান জানি তবে আমার ঠিক একই সমস্যাটি সমাধান করতে হয়েছিল কারণ কেবলমাত্র ব্লকে সেট সেট সাথে একটি সাধারণ লিঙ্ক ট্যাগ লিখলে আইআইতে পুরো ডিভ ক্লিকযোগ্য হয় না। সুতরাং এই সমস্যাটিকে JQuery ব্যবহার না করার চেয়ে সহজ সরানোর জন্য।

প্রথমে আমাদের বুঝতে হবে কেন এটি ঘটে: IE খালি ডিভি ক্লিকযোগ্য করে তুলবে না এটি কেবল সেই ডিভ / ট্যাগের মধ্যে পাঠ্য / চিত্র তৈরি করে।

সমাধান: বকগ্রাউন্ড চিত্রের সাথে ডিভিটি পূরণ করুন এবং এটি দর্শকের কাছ থেকে আড়াল করুন।

কিভাবে? আপনি ভাল প্রশ্ন জিজ্ঞাসা, এখন শুনুন। ট্যাগটিতে এই ব্যাকআউন্ড শৈলী যুক্ত করুন

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

এবং সেখানে আপনার কাছে এটি সম্পূর্ণ ডিভ এখন ক্লিকযোগ্য। এটি আমার পক্ষে আমার ফটো গ্যালারীটির জন্য এটি ব্যবহার করার সর্বোত্তম উপায় ছিল যা ব্যবহারকারীর চিত্রের অর্ধেক অংশে বাম / ডানদিকে যেতে পারে এবং তারপরে একটি ছোট চিত্রও ঠিক দর্শনীয় প্রভাবের জন্য রাখে। সুতরাং আমার জন্য আমি যাই হোক না কেন ব্যাকগ্রাউন্ড চিত্র হিসাবে বাম এবং ডান চিত্র ব্যবহার!

Comments

ধন্যবাদ! আমার একটি চিত্রের উপরে খালি নোঙ্গর সহ একটি চিত্রম্যাপের সিমুলেট করা দরকার এবং বিষয়বস্তু থাকলে আইই আপনাকে ক্লিক করতে দেয়। এটি এটি স্থির করে।

— MDCore

Answer 13

ব্লকটিতে কেবল লিঙ্কটি রয়েছে এবং এটি jquery দিয়ে বাড়িয়ে দিন। এটি জাভাস্ক্রিপ্ট ব্যতীত যে কারও জন্য 100% গ্রেফতারের সাথে হ্রাস করে। এইচটিএমএল দিয়ে এটি করা সত্যিই সেরা সমাধান নয় im উদাহরণ স্বরূপ:

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

তারপরে ব্লকটিকে ক্লিকযোগ্য করে তোলার জন্য ওয়েব ব্যবহার করুন ( ওয়েব ডিজাইনারের প্রাচীরের মাধ্যমে ):

$(document).ready(function(){

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

});

তারপরে আপনাকে যা করতে হবে তা হ'ল ডিভের সাথে কার্সার শৈলী যুক্ত করা

    #div_link:hover {cursor: pointer;}

বোনাস পয়েন্টগুলির জন্য জাভাস্ক্রিপ্টটি ডিভ, বা বডি বা যে কোনও কিছুতে 'js_enable' ক্লাস যুক্ত করে সক্ষম করা থাকলে এই স্টাইলগুলি প্রয়োগ করুন।

Comments

আমি এটি ব্যবহার করতে চাই তবে ডিভের সাথে আমার দুটি লিঙ্ক রয়েছে ... উভয় লিঙ্কে ক্লিক করতে সক্ষম হওয়ার জন্য আমি কীভাবে এটি পরিবর্তন করতে পারি? (আমি যদি এখন দ্বিতীয় লিঙ্কটিতে ক্লিক করি তবে এটি আমাকে "mylink.html" এ নিয়ে যায় ..)

— m3tsys

Answer 14

এই উদাহরণটি আমার পক্ষে কাজ করেছে:

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

Answer 15

এটি আমার পক্ষে কাজ করেছে:

এইচটিএমএল:

<div>

  WHATEVER YOU WANT

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

</div>

সিএসএস:

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

এটি একটি অদৃশ্য উপাদান (স্প্যান) যুক্ত করে, যা আপনার পুরো ডিভকে covers েকে দেয় এবং জেড-ইনডেক্সে আপনার পুরো ডিভের উপরে থাকে , সুতরাং যখন কেউ সেই ডিভের উপর ক্লিক করেন, ক্লিকটি মূলত আপনার অদৃশ্য "স্প্যান" স্তর দ্বারা বাধা হয়ে থাকে, যা লিঙ্কযুক্ত।

দ্রষ্টব্য: আপনি যদি ইতিমধ্যে অন্যান্য উপাদানগুলির জন্য জেড-সূচকগুলি ব্যবহার করছেন তবে কেবলমাত্র নিশ্চিত করুন যে এই জেড-ইনডেক্সের মানটি আপনি যেটি "শীর্ষে" রাখতে চান তার চেয়ে বেশি।

Comments

আমার জন্য কাজ করেছেন। অপেক্ষাকৃত পিতা-মাতার উপাদানটিকে তুলনামূলকভাবে ভুলে যাবেন না।

— সাইফ আল ফালাহ

Answer 16

আসলে আপনার এই মুহূর্তে জাভাস্ক্রিপ্ট কোড অন্তর্ভুক্ত করা দরকার, এটি করার জন্য এই টিউটোরিয়ালটি দেখুন ।

তবে একটি সিএসএস কোড ব্যবহার করে এটি অর্জনের একটি কৌশলপূর্ণ উপায় আছে আপনার ডিভ ট্যাগের ভিতরে আপনাকে অবশ্যই একটি অ্যাঙ্কর ট্যাগ বাসাতে হবে এবং আপনাকে অবশ্যই এই সম্পত্তিটি প্রয়োগ করতে হবে,

display:block;

আপনি যখন এটি সম্পন্ন করেছেন, এটি পুরো প্রস্থ অঞ্চলকে ক্লিকযোগ্য করে তুলবে (তবে অ্যাঙ্কর ট্যাগের উচ্চতার মধ্যে), আপনি যদি পুরো ডিভ অঞ্চলটি coverাকাতে চান তবে আপনাকে অবশ্যই অ্যাঙ্কর ট্যাগের উচ্চতাটি ঠিক উচ্চতার মধ্যে নির্ধারণ করতে হবে ডিভি ট্যাগ, উদাহরণস্বরূপ:

height:60px;

এটি পুরো অঞ্চলটিকে ক্লিকযোগ্য করে তুলবে, তারপরে text-indent:-9999pxলক্ষ্য অর্জনের জন্য আপনি অ্যাঙ্কর ট্যাগটিতে আবেদন করতে পারেন ।

এটি সত্যই জটিল এবং সহজ এবং এটি কেবলমাত্র সিএসএস কোড ব্যবহার করে তৈরি করা হয়েছে।

এখানে একটি উদাহরণ : http://jsfiddle.net/hbirjand/RG8wW/

Answer 17

এটি বিবিসি ওয়েবসাইট এবং গার্ডিয়ান হিসাবে ব্যবহৃত হিসাবে এটি করার সেরা উপায়:

আমি এখানে কৌশলটি পেয়েছি: http://codepen.io/IschaGast/pen/Qjxpxo

heres এইচটিএমএল

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

সিএসএস এখানে

/**
 * 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);
      }
    }
}

Answer 18

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

Answer 19

এই কাজটি আমার জন্য:

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

Answer 20

আপনি নিম্নলিখিত পদ্ধতি দ্বারা আপনার ডিভের একটি লিঙ্ক দিতে পারেন:

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

Answer 21

আপনি একটি href ট্যাগ দিয়ে উপাদানটি ঘিরে রাখতে পারেন বা আপনি jquery এবং ব্যবহার করতে পারেন

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

Answer 22

এটি সহজতম উপায়।

বলুন, এটি সেই divব্লকটি আমি ক্লিকযোগ্য করে তুলতে চাই:

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

সুতরাং hrefনিম্নলিখিত হিসাবে একটি রাখুন :

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

কেবলমাত্র divব্লককে একটি সাধারণ এইচটিএমএল উপাদান হিসাবে বিবেচনা করুন এবং সাধারণ একটি hrefট্যাগ সক্ষম করুন ।
এটি কমপক্ষে এফএফ-তে কাজ করে।

Answer 23

যদিও আমি কোনও পরিস্থিতিতে এটি করার পরামর্শ দিচ্ছি না, এখানে এমন কিছু কোড রয়েছে যা একটি লিঙ্কে ডিআইভি তৈরি করে (দ্রষ্টব্য: এই উদাহরণটি 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>

Comments

আবার, এটি একটি কার্যকরী সমাধান, তবে মূল প্রশ্নের মূল কারণটি নয় যা একটি এক্সএইচটিএমএল সমাধানের জন্য। যদিও না একটি বিশাল চুক্তি, আপনার উত্তর নেই প্রশ্নের গোলমাল যোগ করার জন্য শুরু।

— সোভিয়েট

Answer 24

একটি বিকল্প যা উল্লেখ করা হয়নি তা হ'ল ফ্লেক্স ব্যবহার করা। ট্যাগ প্রয়োগ 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>

Answer 25

আমি একটি পরিবর্তনশীল টানছি কারণ ব্যবহারকারীটি কী রেকর্ডটি আসবে তার উপর নির্ভর করে আমার লিঙ্কে কিছু মান পরিবর্তন হবে। এটি পরীক্ষার জন্য কাজ করেছে:

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

এবং এটিও কাজ করে:

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

Comments

কোড কোনও কারণে দেখায় না আমি একটি গতিশীল লিঙ্ক তৈরি করতে ভিতরে jsp ভেরিয়েবলের সাথে অন্লিক ব্যবহার করেছি

— Beck

Answer 26

আমার স্মার্ট প্যান্ট উত্তর:

"এর বিরক্তিজনক উত্তর:" ব্লক স্তরের উপাদানকে কীভাবে হাইপার লিঙ্ক তৈরি করতে হবে এবং এক্সএইচটিএমএল 1.1 এ বৈধতা দিন "

এইচটিএমএল 5 ডক্টইপিটি ডিটিডি ব্যবহার করুন। "

প্রকৃতপক্ষে ie7 এর জন্য সত্য ধরে নি

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

IE7-9, Chrome, সাফারি, ফায়ারফক্স,

Comments

তিনি "আমি একটি এক্সএইচটিএমএল 1.1 বৈধ উপায়ের সন্ধান করছি"

— চিহ্নিত করুন Mark

Answer 27

যদি কেবল সবকিছুই সহজ হতে পারে ...

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

বাক্সের বাইরে একটু ভাবুন ;-)