আপনি কীভাবে কোনও অ্যাঙ্কর লিঙ্কটি অ-ক্লিকযোগ্যযোগ্য বা অক্ষম করবেন?


92

আমার একটি অ্যাঙ্কর লিঙ্ক রয়েছে যা ব্যবহারকারী একবার ক্লিক করলে এটি অক্ষম করতে চাই। বা, পাঠ্যের চারপাশ থেকে অ্যাঙ্কর ট্যাগ সরিয়ে ফেলুন, তবে অবশ্যই পাঠ্যটি রাখুন।

<a href='' id='ThisLink'>some text</a>

আমি .attr("disabled", "disabled");
সফলভাবে অক্ষম সম্পত্তি যুক্ত করে একটি বোতামের সাহায্যে এটি করতে পারি , তবে লিঙ্কটি এখনও ক্লিকযোগ্য ছিল।
পাঠ্যটি আন্ডারলাইন করা হয়েছে কিনা তা আমি সত্যিই চিন্তা করি না।

কোন সুত্র?

আপনি যখন ভুল সংগীতশিল্পীর উপর ক্লিক করেন, এটি কেবল "ভুল" যুক্ত করা উচিত এবং তারপরে অনিচ্ছাকৃত হয়ে উঠতে হবে।
আপনি যখন ক্লিক করেন এবং আপনি সঠিক হন, এটিতে "দুর্দান্ত" যুক্ত হওয়া উচিত এবং তারপরে সমস্ত <a>ট্যাগ অক্ষম করা উচিত ।


href অংশটি সরিয়ে আপনার সিএসএসে যুক্ত করুন: "কার্সার: পয়েন্টার", আমি ধরে নিয়েছি আপনার কাছে একটি $ ('# এটিলিঙ্ক') রয়েছে। ক্লিক করুন বা এরকম কিছু?
জিউস বই

4
$ ("# এই লিঙ্ক")। পিতামাতা ()। সন্ধান করুন ("ক")
অ্যাডাম হোমস

অ্যাডাম, এই সমাধান প্রায় কাজ করে। এটি ট্যাগের মধ্যে থাকা সমস্ত পাঠ্য থেকে মুক্তি পেয়ে যায়।
এভিক জেমস

উত্তর:


12

আমি ঠিক বুঝতে পেরেছিলাম আপনি কী চাইছেন (আমি আশা করি)। এখানে একটি কুরুচিপূর্ণ সমাধান

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

এটি প্রকৃতপক্ষে সমস্যাটি সমাধান করতে পারে, সাজানোর ... পরিবর্তনের জন্য। ক্লিক করুন, শরীরের উপর .on ব্যবহার করুন এবং 'একটি [অক্ষম]' এ প্রতিনিধি দিন। তারপরে একই সিলেক্টর ব্যবহার করে আসল সিএসএসে সিএসএস কোড দিন। তারপরে, ক্লিক প্রতিরোধ করা ইভেন্টের মতোই সহজ is ডেভল্ট () এবং মিথ্যা প্রত্যাবর্তন করুন
লেসোমব্রা

4
অসম্মতি, CSS ব্যবহার করুন "পয়েন্টার-ইভেন্ট: কিছুই নয়" পরিবর্তে, অন্যান্য unswers মত।
ভিট্রিলো

200

সবচেয়ে পরিষ্কার পদ্ধতি হ'ল পয়েন্টার-ইভেন্টগুলি সহ একটি শ্রেণি যুক্ত করা: আপনি যখন কোনও ক্লিক অক্ষম করতে চান তখন কিছুই নয়। এটি একটি সাধারণ লেবেলের মতো কাজ করবে।

.disableClick{
    pointer-events: none;
}

19
এই ধারণাটি ব্যবহার করা আরও সহজ উপায় হ'ল কোনও [অক্ষম] সিএসএসের নির্বাচক হিসাবে ব্যবহার করা যাতে আপনার অ্যাঙ্কারে। ডিসাইবল ক্লিক ক্লাস যুক্ত করার প্রয়োজন না হয়
ফেরান সালগুয়েরো

15
সতর্ক থাকুন যদিও আপনি এখনও পয়েন্টার-ইভেন্টগুলির সাথে অক্ষম জিনিসগুলিতে ট্যাব করতে পারেন:
কোনওটি

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

4
ব্যবহার pointer-events:noneএছাড়াও নিষ্ক্রিয় করা হবে cursor, এবং শিরোনাম পাঠ্য, অন্যান্য মাউসওভার ইভেন্ট নেই।
কিথ

মানটি কোনওরূপে মাউস ইভেন্টটিকে উপাদানটির মধ্য দিয়ে "যেতে" এবং নির্দেশকের পরিবর্তে যে উপাদানটির "নীচে" থাকে তার নির্দেশ দেয়। developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
এগুলি

33
<a href='javascript:void(0);'>some text</a>

8
দয়া করে আপনার সমাধানটি ব্যাখ্যা করুন যাতে ভবিষ্যতে এই প্রশ্নের আগত দর্শক বুঝতে পারে যে এটি কীভাবে সমস্যাটি সমাধান করে।
War10ck

4
থেকে: এমডিএন: শূন্য অপারেটর । যখন কোনও ব্রাউজার একটি অনুসরণ করে javascript: URI, এটি ইউআরআই-তে কোডটি মূল্যায়ন করে এবং পৃষ্ঠার বিষয়বস্তুগুলিকে প্রতিস্থাপিত মানের সাথে প্রতিস্থাপন করে, যদি না ফেরত মান হয় undefinedvoidঅপারেটর আসতে ব্যবহার করা যেতে পারে undefined। উদাহরণস্বরূপ: <a href="javascript:void(0);"> Click here to do nothing </a> দ্রষ্টব্য, তবে যে javascript:সিউডো প্রোটোকল অন্যান্য বিকল্পের উপর যেমন নিরর্থক ইভেন্ট হ্যান্ডলার হিসাবে নিরুৎসাহিত করা হয়।
লেনিন

29

পয়েন্টার-ইভেন্টগুলি সিএসএস স্টাইল ব্যবহার করুন । (জেসন ম্যাকডোনাল্ড যেমন পরামর্শ দিয়েছেন)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events দেখুন । এটি বেশিরভাগ ব্রাউজারগুলিতে সমর্থিত।

আপনার যদি বিশ্বব্যাপী সিএসএস নিয়ম নীচের মতো থাকে তবে অ্যাঙ্কারে সাধারণ "অক্ষম" বৈশিষ্ট্যটি কাজটি করবে:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

4
শ্রেণীর পরিবর্তে [অক্ষম] বৈশিষ্ট্যের মাধ্যমে স্টাইলিং যুক্ত করার জন্য +1। এটি লক্ষ করা উচিত যে পয়েন্টার-ইভেন্টগুলি: কোনওটি নয়; যদিও আইই ১১ এর চেয়ে পুরনো কিছুতে কাজ করে না।
ড্যানিয়েল টনন

সমস্ত আইইগুলির ডিফল্টরূপে অ্যাঙ্কর, বোতাম এবং এমনকি অন্যান্য উপাদানগুলি অক্ষম করার নিজস্ব মালিকানাযুক্ত যুক্তি রয়েছে। নন-আইই ব্রাউজারগুলির জন্য এটি কার্যকরভাবে প্রয়োজন।
ভিট্রিলো

4
+1 ঠিক তাই আমাকে পরের বারে এটি দেখার দরকার নেই: প্রয়োজনীয় জাভাস্ক্রিপ্ট (jQuery ব্যবহার করে) হবে $("#elementid").attr("disabled", "disabled");। এছাড়াও cursor: defaultসিএসএসে অন্তর্ভুক্ত হতে সহায়ক হতে পারে (মুহাম্মদ নাসিরের পরামর্শ অনুসারে)।
এএসএল

কোনও উপাদানগুলির একটি নির্বাচিত হিসাবে এটি ব্যবহার করা বা নাও করতে পারে, এটি অক্ষম বৈশিষ্ট্যযুক্ত না।
রবজি

4
স্বজ্ঞাত - ভাল সমাধান। আমি আসলে অবাক হয়েছিলাম যে <a />উপাদানগুলির একটি অক্ষম বৈশিষ্ট্য নেই - এটি অদ্ভুত বলে মনে হয়।
মরভেল


10

বুটস্ট্র্যাপ আমাদের .disabledক্লাস সরবরাহ করে। দয়া করে এটি ব্যবহার করুন।

কিন্তু .disabledশ্রেণী কেবলমাত্র তখনই কাজ যখন 'একটি' ট্যাগ ইতিমধ্যে বর্গ 'btn' হয়েছে। এটি কোনও পুরানো 'এ' ট্যাগে কাজ করে না। btnবর্গ কিছু প্রেক্ষাপটে উপযুক্ত নাও হতে পারে যেমন শৈলী connotations হয়েছে। কভারগুলির অধীনে, .disabledক্লাসটি সেট pointer-eventsকরে none, যাতে আপনি সরোজ আরিয়াল এবং ভিট্রিলো যে হার মানিয়েছেন তেমন কাজ করতে CSS তৈরি করতে পারেন। (আপনাকে ধন্যবাদ, এই পরামর্শের জন্য লেস নাইটিংল)।


4
। ডিজেবল ক্লাসটি কেবল তখনই কাজ করে যখন 'এ' ট্যাগটিতে ইতিমধ্যে ক্লাস 'বিটিএন' থাকে। এটি কোনও পুরানো 'এ' ট্যাগে কাজ করে না। 'বিটিএন' শ্রেণিটি কোনও প্রসঙ্গে উপযুক্ত নাও হতে পারে কারণ এর স্টাইলের অর্থ রয়েছে ot কভারগুলির অধীনে,। অক্ষম শ্রেণিটি কারও কাছে পয়েন্টার-ইভেন্টগুলি সেট করে না, তাই আপনি সরোজ আরিয়াল এবং ভিট্রিলো যে হার মানিয়েছেন তেমন কাজ করার জন্য সিএসএস তৈরি করতে পারেন।
লেস নাইটিংল

আপনার বিস্তারিত মন্তব্যের জন্য আপনাকে ধন্যবাদ। এটি অনেক ব্যবহারকারীর জন্য অনেক কিছুই স্পষ্ট করে। আমার উত্তরটি প্রসারিত করতে আমি কি আপনার মন্তব্য থেকে কিছু পাঠ্য ব্যবহার করতে পারি?
ইয়েভেগেনি আফানসিয়েভ


5

hrefঅ্যাঙ্কর ট্যাগ থেকে কেবল অ্যাট্রিবিউটটি সরিয়ে দিন ।


4
কিছু ব্রাউজারে href মুছে ফেলা সহজভাবে / বা বর্তমান পৃষ্ঠায় href সেট করে।
বহুবৃত্তীয়

আমি মনে করি এটি প্রথম পদ্ধতির হওয়া উচিত
বাস স্লাগটার

5

সর্বোত্তম উপায় হ'ল ডিফল্ট ক্রিয়াটি রোধ করা। অ্যাঙ্কার ট্যাগের ক্ষেত্রে, ডিফল্ট আচরণটি hrefনির্দিষ্ট ঠিকানায় পুনর্নির্দেশ হয় ।

সুতরাং নিম্নলিখিত জাভাস্ক্রিপ্ট পরিস্থিতিতে সেরা কাজ করে:

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

4

ক্লিক ক্লিকটি অক্ষম করতে আপনি অন্লিক ইভেন্টটি ব্যবহার করতে পারেন:

<a href='' id='ThisLink' onclick='return false'>some text</a>

অথবা আপনি <a>ট্যাগ ছাড়া অন্য কিছু ব্যবহার করতে পারেন ।


আপনি এটির সাথে একত্রিত করতে পারেন text-decoration: noneএবং .disabledLink { color: #000 !important; }এটি নিয়মিত পাঠ্যের মতো প্রদর্শিত হতে পারে।
বহুবর্ষীয়

4
বিড়ম্বনা জাভাস্ক্রিপ্ট একটি ভয়ঙ্কর সমাধান।
জহরিচি

4

জেসন ম্যাকডোনাল্ড মন্তব্যগুলি আমার পক্ষে কাজ করেছে, ক্রোম, মজিলা এবং আইইতে পরীক্ষিত হয়েছে।

অক্ষম প্রভাব প্রদর্শন করতে ধূসর বর্ণ যুক্ত করা হয়েছে।

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

জ্যাকিউরি অ্যাঙ্কর তালিকায় কেবলমাত্র প্রথম উপাদানটি বেছে নিচ্ছিলেন, আইডি সহ সমস্ত উপাদান নির্বাচন এবং অক্ষম করতে মেটা চরিত্র (*) যুক্ত করেছিলেন #ThisLink

$("#ThisLink*").addClass("disable_a_href"); 

4

এটি jQuery কোডের একক লাইন লিখুন

$('.hyperlink').css('pointer-events','none');

আপনি যদি সিএসএস ফাইল লিখতে চান

.hyperlink{
    pointer-events: none;
}

3

স্টাইল শীটে নিম্নলিখিত ক্লাসটি তৈরি করুন:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

এই ক্লাসটি যুক্ত হিসাবে আপনার অনুসরণ হিসাবে গতিশীল লিঙ্ক।

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

জেসন ম্যাকডোনাল্ডের উত্তর থেকে এটি কীভাবে আলাদা ?
সমস্ত শ্রমিকরা

1

এটা চেষ্টা কর:

$('a').contents().unwrap();

অ্যাঙ্কর স্টাইলিংয়ের নিয়মগুলি কী ধারণ করে যা তাদের প্রোগ্রামের জন্য প্রয়োজনীয়, এটি সিএসএসকে অবজ্ঞা করে এমন একটি ফিক্স
ট্রেভর রুডল্ফ

1

কেবল SASS এ:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

যদিও এই কোডটি প্রশ্নের উত্তর দিতে পারে, কেন এবং / অথবা এটি কীভাবে প্রশ্নের উত্তর দেয় সে সম্পর্কিত অতিরিক্ত প্রসঙ্গ সরবরাহ করে এর দীর্ঘমেয়াদী মানকে উল্লেখযোগ্যভাবে উন্নতি করবে। কিছু ব্যাখ্যা যুক্ত করতে দয়া করে আপনার উত্তরটি সম্পাদনা করুন।
টবি স্পিড

1

এই পদ্ধতিটি আমি অক্ষম করতে ব্যবহার করেছি ope আশা করি এটি সহায়তা করে।

$("#ThisLink").attr("href","javascript:;");

4
এটি সহজ এবং সহজ সমাধান এবং এটি গ্রহণ করা উচিত!
Si8

-1
$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

এটি করার অন্য উপায় হ'ল হ্যান্ডলারটি return false, যা লিঙ্কটি অক্ষম করবে, এক ক্লিকের পরে যুক্ত করা হবে।


-4

সবচেয়ে সহজ উপায়

আপনার এইচটিএমএলে:

<a id="foo" disabled="true">xxxxx<a>

আপনার জেএসে:

$('#foo').attr("disabled", false);

আপনি যদি এটি এট্রিবিউট হিসাবে ব্যবহার করেন তবে নিখুঁতভাবে কাজ করে


4
অক্ষম করা <a> ট্যাগের জন্য কোনও বৈধ বৈশিষ্ট্য নয়
জোসেপাস
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.