কীভাবে কেবল সিএসএস ব্যবহার করে কোনও লিঙ্ক অক্ষম করবেন?


843

সিএসএস ব্যবহার করে কোনও লিঙ্ক অক্ষম করার কোনও উপায় আছে কি?

আমার একটি ক্লাস রয়েছে current-pageএবং আমি চাইছি এই ক্লাসের সাথে লিঙ্কগুলি অক্ষম করা যাতে তারা ক্লিক করা হয় তখন কোনও পদক্ষেপ না ঘটে।



1
কোনও লিঙ্ক ব্যবহার করা উচিত কিনা তা বর্তমানের মানের চেয়ে বেশি শব্দার্থিক বহন করে। এটি সিএসএসের মাধ্যমে অক্ষম করা উচিত নয়, তবে hiddenকোনও HTML উপাদানগুলির জন্য প্রযোজ্য বৈশিষ্ট্যটি ব্যবহারের মাধ্যমে । সিএসএস এর পরে উদাহরণ হিসাবে a[hidden]অ্যাঙ্কর নির্বাচন করতে এবং এটি অনুসারে এটি স্টাইল করা যেতে পারে ।
amn

@ এ্যামন তবে আমি মনে করি না যে ব্রাউজারগুলি লুকানো বৈশিষ্ট্যের সাথে কোনও উপাদান প্রদর্শন করবে যাতে স্টাইলিং মোটা হয়ে যায় oot
ব্যবহারকারী 1794469

1
@ user1794469 তারা যদি তাদের নির্দেশ, সিএসএস, ব্যবহার করে display: block, উদাহরণস্বরূপ বা কিছু অন্যান্য মান display। তবে hiddenসর্বদা প্রযোজ্য নয় - এটি এমন উপাদানগুলির জন্য যা অপ্রাসঙ্গিক , এবং প্রশ্নটি থেকে কেন লিঙ্কটি অক্ষম করা উচিত তা স্পষ্ট নয় । এটি সম্ভবত এক্সওয়াই সমস্যার ক্ষেত্রে।
এএম

উত্তর:


1347

উত্তরটি ইতিমধ্যে প্রশ্নের মন্তব্যে রয়েছে। আরও দৃশ্যমানতার জন্য, আমি এই সমাধানটি এখানে অনুলিপি করছি :

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  color: black;
}
<a href="link.html" class="not-active">Link</a>

ব্রাউজার সমর্থনের জন্য, দয়া করে https://caniuse.com/#feat=pointer-events দেখুন । আপনার যদি আইই সমর্থন করার প্রয়োজন হয় তবে একটি কার্যকারিতা রয়েছে; দেখতে এই উত্তর

সতর্কতা: pointer-eventsনন-এসভিজি উপাদানগুলির জন্য সিএসএসে ব্যবহার পরীক্ষামূলক। বৈশিষ্ট্যটি CSS3 UI খসড়া স্পেসিফিকেশনের অংশ হিসাবে ব্যবহৃত হত তবে অনেকগুলি উন্মুক্ত সমস্যার কারণে, CSS4 এ স্থগিত করা হয়েছে।


36
এছাড়াও, এই লিঙ্কটি ট্যাবিং এড়াতে পারে না তারপর প্রবেশ করুন।
জোনো

4
আপনি যদি এটি কিছুটা স্টাইল করেন তবে ব্যবহারকারী এটি অক্ষম দেখতে পাবে। এটির কিছুটা অস্বচ্ছতা দিন: .2
DNRN

4
এটি এখন ইন্টারনেট 11. সহ সব আধুনিক ব্রাউজারে কাজ করে আপনি প্রয়োজন IE 10 ব্যবহার জন্য সমর্থন এবং নীচে, আপনি একটি জাভাস্ক্রিপ্ট polyfill যেমন ব্যবহার করতে পারেন এই এক
কেভন

26
গুরুত্বপূর্ণ দ্রষ্টব্য: এটি কেবল ক্লিক করা অক্ষম করে, আসল লিঙ্কটি নিজেই নয়। আপনি এখনও লিঙ্কটি "ক্লিক" করতে ট্যাব + এন্টার ব্যবহার করতে পারেন।
পিকমন্দর 2

11
ব্যবহার pointer-events: none;নিখুঁত নয়। এটি অন্যান্য ইভেন্টগুলি যেমন হোভারকে অক্ষম করে, যা প্রদর্শনের জন্য title="…"বা সরঞ্জামদণ্ডের জন্য প্রয়োজনীয় । আমি event.preventDefault();কিছু সিএসএস ( cursor: default; opacity: 0.4;) এর সাথে জেএস সমাধানটি আরও ভাল (ব্যবহার করে ) এবং লিঙ্কটি কেন অক্ষম করা হয়েছে তা ব্যাখ্যা করার একটি সরঞ্জামদণ্ড খুঁজে পেয়েছি ।
কুইন কমেন্ডেন্ট

140

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}
<a href="#" class="disabled">link</a>


আপনার ইনপ্লিনেশনটি ইনলাইন-ব্লকে (বা ইনলাইন ব্যতীত অন্য কোনও কিছুতে) সেট করতে হবে।
dev_masta

দুর্দান্ত, তবে পয়েন্টার-ইভেন্টগুলি ব্রাউজার সমর্থন (যেমন < আই 11
একজন দম্পতি

1
শৈলীর জন্য, এটিকে পরিবর্তন pointer-events:none;করে দেখুন pointer-events:unset;। তারপরে, কার্সারটি পরিবর্তিত হতে পারে cursor:not-allowed;। এটি ব্যবহারকারীর কাছে কী চলছে তার একটি আরও ভাল ক্লু দেয়। আজকের হিসাবে এফএফ, এজ, ক্রোম, অপেরা এবং সাহসী কাজ করার জন্য মনে হচ্ছে।
সাবলফস্টে

@ সাবেলফোস্টে এটি ক্রোম 60 এ আমার পক্ষে কাজ করে না The কার্সারটি সত্যই not-allowedতবে লিঙ্কটি ক্লিকযোগ্য remains
স্যুপডগ

122

সিএসএস কেবল কোনও কিছুর স্টাইল পরিবর্তন করতে ব্যবহার করা যেতে পারে। খাঁটি সিএসএসের সাথে আপনি সবচেয়ে ভাল যা করতে পারেন তা হ'ল লিঙ্কটি পুরোপুরি আড়াল করা।

আপনার যা দরকার তা হ'ল কিছু জাভাস্ক্রিপ্ট। আপনি jQuery লাইব্রেরি ব্যবহার করে যা করতে চান তা এখানে করুন।

$('a.current-page').click(function() { return false; });

21
ডিফল্ট ব্যবহার প্রতিরোধ ভুলবেন না: function(ev){ ev.preventDefault(); ev.stopPropagation(); return false;
ldiqual

5
@ আইডিকাল, এটি return falseকরেন
নিকফ

1
return falseকেবলমাত্র কাজটি যদি hrefঅ্যাট্রিবিউটটি ব্যবহার করে সেট করা থাকে
জাস্টিন

এছাড়াও এই সংস্করণটি অন্য পয়েন্টার ইভেন্টগুলি যেমন: হোভার বা: ফোকাস রাখার সাথে সাথে ক্লিকগুলি অক্ষম করতে ব্যবহার করা যেতে পারে! শীর্ষ উত্তর!
চার্লি টুপম্যান

যদিও এটি সমস্ত ব্রাউজারে কাজ করে, এটি কেবলমাত্র একটি লিঙ্কে ক্লিক করা অক্ষম করে। মনে রাখবেন অনেক ব্যবহারকারী কনটেক্সট মেনু থেকে বা মাঝের মাউস বোতামটি ব্যবহার করে লিঙ্কগুলি খুলতে ব্যবহৃত হয়।
আলেকজান্দ্রু সেভেরিন

33

সিএসএস এটি করতে পারে না। সিএসএস কেবল উপস্থাপনার জন্য। আপনার বিকল্পগুলি হ'ল:

  • hrefআপনার <a>ট্যাগগুলিতে বৈশিষ্ট্যটি অন্তর্ভুক্ত করবেন না ।
  • সেই সাথে অ্যাঙ্কর উপাদানগুলি খুঁজতে জাভাস্ক্রিপ্ট ব্যবহার করুন classএবং সেগুলি অনুসারে তাদের hrefবা onclickবৈশিষ্ট্যগুলি সরিয়ে ফেলুন । jQuery আপনাকে এটিতে সহায়তা করবে (নিকফ কীভাবে অনুরূপ তবে আরও ভাল কিছু করতে পারে তা দেখিয়েছে)।

30
এটি সঠিক উত্তর নয় - পয়েন্টার-ইভেন্টগুলি: কিছুই নয়; সিএসএস এটি অক্ষম করতে পারে।
পাই

আমি তা ভেবে দেখিনি! অথবা সম্ভবত 2010 সালে এই বৈশিষ্ট্যটির অস্তিত্ব ছিল না? যে কোনও ক্ষেত্রে এটি সত্য যে pointer-events: noneমাউস ইভেন্টগুলি অক্ষম করতে পারে। তবে এটি অন্তর্নিহিত লিঙ্কটি অক্ষম করে না। আমি ক্রোম ৮১ এ চেষ্টা করেছিলাম এমন পরীক্ষার পরেও আমি এ জাতীয় লিঙ্কটিতে ট্যাব করে ফিরতি কী টাইপ করে সক্রিয় করতে পারি।
কেভিন কনার

31

বুটস্ট্র্যাপ অক্ষম লিঙ্ক

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

বুটস্ট্র্যাপ অক্ষম বোতাম তবে এটি লিঙ্কের মতো দেখাচ্ছে

<button type="button" class="btn btn-link">Link</button>

19

আপনি hrefএট্রিবিউট সেট করতে পারেনjavascript:void(0)

.disabled {
  /* Disabled link style */
  color: black;
}
<a class="disabled" href="javascript:void(0)">LINK</a>


2
@ নিকফ সত্য, তবে এটি একটি ঝরঝরে সমাধান এবং অক্ষম থাকা অবস্থায় সেটাকে দুর্বল ডিফল্ট আইই স্টাইলিংয়ের উপর নির্ভর করার চেয়ে ভাল।
সসেজফিনজারগুলি

আমি মনে করি এটি এর চেয়ে কিছুটা জটিল হতে পারে। এখানে একটি সমাধান snook.ca/archives/javascript/clear_links_to_1
মাইক গিফোর্ড

12

আমি ব্যবহার করতাম:

.current-page a:hover {
pointer-events: none !important;
}

এবং যথেষ্ট ছিল না; কিছু ব্রাউজারে এটি এখনও লিংকটি দেখায়, জ্বলজ্বলে।

আমাকে যোগ করতে হয়েছিল:

.current-page a {
cursor: text !important;
}

3
আমার মনে a[disabled]:active { pointer-events: none !important; }হয় আরও ভাল।
মাসামোটো মিয়াটা

10

আপনি যদি কোনও ফর্মের মধ্যে কেবল এইচটিএমএল / সিএসএসে লেগে থাকতে চান তবে অন্য একটি বিকল্প হ'ল একটি বোতাম ব্যবহার করা। এটি স্টাইল করুন এবং disabledবৈশিষ্ট্যটি সেট করুন ।

যেমন http://jsfiddle.net/cFTxH/1/


10

আপনি যদি এটি কেবল সিএসএস হিসাবে চান, অক্ষম যুক্তি সিএসএস দ্বারা সংজ্ঞায়িত করা উচিত।

সিএসএস সংজ্ঞাগুলিতে যুক্তি সরাতে আপনাকে অ্যাট্রিবিউট সিলেক্টর ব্যবহার করতে হবে। এখানে কিছু উদাহরন :

সঠিক লিঙ্কযুক্ত লিঙ্কটি অক্ষম করুন: =

আপনি এমন লিঙ্কগুলিকে অক্ষম করতে বেছে নিতে পারেন যাতে নির্দিষ্ট হেরেফের মান রয়েছে:

<a href="//website.com/exact/path">Exact path</a>

[href="https://stackoverflow.com//website.com/exact/path"]{
  pointer-events: none;
}

কোনও লিঙ্ক অক্ষম করুন যাতে পথের একটি অংশ রয়েছে: *=

এখানে, /keyword/পথে থাকা যে কোনও লিঙ্ক অক্ষম করা হবে

<a href="//website.com/keyword/in/path">Contains in path</a>

[href*="/keyword/"]{
  pointer-events: none;
}

যে লিঙ্কটি শুরু হয় তা অক্ষম করুন: ^=

[attribute^=value]অপারেটর লক্ষ্য একটি বৈশিষ্ট্য যে কোনো সুনির্দিষ্ট মানের সঙ্গে শুরু হয়। আপনাকে ওয়েবসাইটগুলি এবং মূল পাথগুলি বাতিল করতে দেয়।

<a href="//website.com/begins/with/path">Begins with path</a>

[href^="//website.com/begins/with"]{
  pointer-events: none;
}

এমনকি আপনি এটি অ-https লিঙ্কগুলি অক্ষম করতে ব্যবহার করতে পারেন। উদাহরণ স্বরূপ :

a:not([href^="https://"]){
  pointer-events: none;
}

এর সাথে শেষ হওয়া কোনও লিঙ্কটি অক্ষম করুন: $=

[attribute$=value]অপারেটর একটি বৈশিষ্ট্য লক্ষ্য করে একটি সুনির্দিষ্ট মানের দিয়ে শেষ হয়। ফাইল এক্সটেনশনগুলি বাতিল করতে এটি কার্যকর হতে পারে।

<a href="/path/to/file.pdf">Link to pdf</a>

[href$=".pdf"]{
  pointer-events: none;
}

বা অন্য কোনও বৈশিষ্ট্য

CSS যে কোনও HTML বৈশিষ্ট্যকে লক্ষ্য করতে পারে target হতে পারে rel, target, data-customইত্যাদি ...

<a href="#" target="_blank">Blank link</a>

[target=_blank]{
  pointer-events: none;
}

বৈশিষ্ট্য নির্বাচনকারীদের সম্মিলন

আপনি একাধিক বিধি চেইন করতে পারেন। আসুন আমরা বলি যে আপনি প্রতিটি বাহ্যিক লিঙ্কটি অক্ষম করতে চান, তবে আপনার ওয়েবসাইটের দিকে ইঙ্গিত করে এমনগুলি নয়:

a[href*="//"]:not([href*="my-website.com"]) {
    pointer-events: none;
}

অথবা নির্দিষ্ট ওয়েবসাইটের পিডিএফ ফাইলের লিঙ্কগুলি অক্ষম করুন:

<a href="//website.com/path/to/file.jpg">Link to image</a>

[href^="//website.com"][href$=".jpg"] {
  color: red;
}

ব্রাউজার সমর্থন

বৈশিষ্ট্য নির্বাচনকারীরা আই 7 এর পরে সমর্থিত। :not()আইই 9 সাল থেকে নির্বাচক


অক্ষম নির্বাচক ব্যবহার করে আমি কীভাবে কোনও লিঙ্ক অক্ষম করব? উদাহরণস্বরূপ <a class="test" अक्षम href="3"> পরীক্ষা </a> a: অক্ষম {কার্সার: অনুমোদিত নয়; }
ইকাস্পার

10

CSS এর মাধ্যমে আপনি যেভাবে এটি করতে পারেন, তা হ'ল একটি মোড়কের উপরে একটি CSS divসেট করা যা আপনি অদৃশ্য হয়ে যাওয়ার জন্য সেট করেছেন এবং অন্য কোনও স্থান এটির জায়গা নিয়েছে।

উদাহরণ:

<div class="disabled">
    <a class="toggleLink" href="wherever">blah</a>
    <span class="toggleLink">blah</span
</div>

সিএসএসের মতো

.disabled a.toggleLink { display: none; }
span.toggleLink { display: none; }
.disabled span.toggleLink { display: inline; }

আসলে বন্ধ করতে aআপনাকে এটি ক্লিক ইভেন্ট বা প্রতিস্থাপন করতে হবেhref অন্যদের দ্বারা বর্ণিত হিসাবে ।

পিএস: কেবল এটি পরিষ্কার করার জন্য আমি এটিকে মোটামুটি অপ্রয়োজনীয় সমাধান বিবেচনা করব এবং এসইওর পক্ষে এটি সবচেয়ে ভাল নয় তবে আমি বিশ্বাস করি এটি নিখুঁত সিএসএসের সাথে সেরা।


8

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

<style>
.btn-disable {
    display:inline-block;
    pointer-events: none;       
}
</style>

6

পয়েন্টার-ঘটনা সম্পত্তি নিয়ন্ত্রণ জন্য করতে পারবেন কিভাবে মাউসের HTML উপাদানগুলি সাড়া / স্পর্শ ঘটনা - সিএসএস হোভার / সক্রিয় রাজ্যের ক্লিক / জাভাস্ক্রিপ্ট ঘটনা আলতো চাপুন এবং থাকুক বা না থাকুক কার্সার দৃশ্যমান সহ।

এটা না একমাত্র উপায় আপনি অক্ষম একটি লিঙ্ক , কিন্তু একটি ভাল সিএসএস পথ IE10 + এবং সব নতুন ব্রাউজার যা কাজ:

.current-page {
  pointer-events: none;
  color: grey;
}
<a href="#" class="current-page">This link is disabled</a>


4

আমি ইন্টারনেটের মাধ্যমে অনুসন্ধান এবং কোন বেশী ভালো পাওয়া এই । মূলত বোতাম ক্লিক কার্যকারিতা অক্ষম করতে, কেবল jQuery ব্যবহার করে CSS স্টাইল যুক্ত করুন:

$("#myLink").css({ 'pointer-events': 'none' });

তারপরে এটি সক্ষম করতে আবার এটি করুন

$("#myLink").css({ 'pointer-events': '' });

ফায়ারফক্স এবং আইই 11 এ চেক করা হয়েছে, এটি কাজ করে।


3
এর জন্য আপনার jQuery দরকার নেই, আপনি এটি নিজেরাই সিএসএসে সেট করতে পারেন।
ব্রাম ভ্যানরোয়

3

আপনি এই সিএসএস ব্যবহার করতে পারেন:

a.button,button {
    display: inline-block;
    padding: 6px 15px;
    margin: 5px;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px;
    -moz-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    -webkit-box-shadow: inset 0 3px 20px 0 #cdcdcd;
    box-shadow: inset 0 3px 20px 0 #cdcdcd;
}

a[disabled].button,button[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
    -webkit-touch-callout: none;
}

a.button:active:not([disabled]),button:active:not([disabled]) {
    background-color: transparent !important;
    color: #2a2a2a !important;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .5);
}
<button disabled="disabled">disabled!</button>
<button>click me!</button>
<a href="http://royansoft.com" disabled="disabled" class="button">test</a>
<a href="http://royansoft.com" class="button">test2</a>


2

সমাধান পোস্ট করা প্রত্যেককে ধন্যবাদ, আমি আরও কিছু উন্নত disabledকার্যকারিতা সরবরাহ করার জন্য একাধিক পদ্ধতির সমন্বয় করেছি । এখানে একটি সংক্ষেপ , এবং কোড নীচে আছে is

This provides for multiple levels of defense so that Anchors marked as disable actually behave as such.
Using this approach, you get an anchor that you cannot:
  - click
  - tab to and hit return
  - tabbing to it will move focus to the next focusable element
  - it is aware if the anchor is subsequently enabled


1.  Include this css, as it is the first line of defense.  This assumes the selector you use is 'a.disabled'
    a.disabled {
      pointer-events: none;
      cursor: default;
    }

 2. Next, instantiate this class such as (with optional selector):
    $ ->
      new AnchorDisabler()

এখানে কফস্ক্রিপ্ট ক্লাস:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

হ্যালো !!, উত্তর CSSনা JSবা অন্য কিছু সম্পর্কে !
মেহেদী দেহঘানি

1

আপনি অন্য একটি উপাদানও আকার দিতে পারেন যাতে এটি লিঙ্কগুলিকে কভার করে (ডান জেড-ইনডেক্স ব্যবহার করে): ক্লিকগুলি "খাওয়া" করবে।

(আমরা দুর্ঘটনাক্রমে এটি আবিষ্কার করেছি কারণ ব্রাউজার উইন্ডোটি যখন মোবাইল-আকারের ছিল তখন এইচ 2 তাদের coverেকে রাখার কারণে "প্রতিক্রিয়াশীল" ডিজাইনের কারণে হঠাৎ নিষ্ক্রিয় লিঙ্কগুলির সাথে আমাদের একটি সমস্যা হয়েছিল))


সত্য, তবে কীবোর্ড নেভিগেশনের জন্য নয়।
ফিশার 10

1

এখানে ডেমো এটি
চেষ্টা করে দেখুন

$('html').on('click', 'a.Link', function(event){
    event.preventDefault();
});

1
আপনার ফিডাল কাজ করে না! লিঙ্কটি ক্রোমে এখনও সক্রিয়।
ম্যাট বাইর্ন

এই কোডটি ঠিক করতে, (): $ ('এইচটিএমএল') এ প্রথম দুটি প্যারামিটার অদলবদল করুন।
2 সি-বি

1
হ্যালো !!, উত্তর CSSনা JSবা অন্য কিছু সম্পর্কে !
মেহেদী দেহঘানি

0

আর একটি কৌশল এটির উপরে একটি অদৃশ্য উপাদান স্থাপন। এটি পাশাপাশি কোনও হোভার ইফেক্ট অক্ষম করবে

.myButton{
    position: absolute;
    display: none;
}

.myButton::after{ 
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
}

-1

সিএসএসে এটি করা সম্ভব

.disabled{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
  color:black;
}
<a href="https://www.google.com" target="_blank" class="disabled">Google</a>

দেখুন:

দয়া করে নোট করুন text-decoration: none;এবং এর color: black;প্রয়োজন নেই তবে এটি লিঙ্কটিকে আরও সরল পাঠ্যের মতো দেখায়।


-1

pointer-events:none লিঙ্কটি অক্ষম করবে:

.disabled {
       pointer-events:none;
}
<a href="#" class="disabled">link</a>

1
এটি ভাল, তবে অবশ্যই কাজ করছে না যদি ব্যবহারকারীরা তার কীবোর্ড ব্যবহার করে :(
gztomas

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.