এইচটিএমএল অ্যাঙ্কর ট্যাগটি কি সিএসএস ব্যবহার করে ক্লিকযোগ্য / লিঙ্কযোগ্য নয়?

Question

উদাহরণস্বরূপ যদি আমার কাছে এটি থাকে:

<a style="" href="page.html">page link</a>

স্টাইল অ্যাট্রিবিটির জন্য আমি কি এমন কিছু ব্যবহার করতে পারি যা এটি তৈরি করবে যাতে লিঙ্কটি ক্লিকযোগ্য না হয় এবং আমাকে পেজ এইচটিএমএলে নেবে না?

বা, কেবলমাত্র অ্যাঙ্কর ট্যাগটিতে 'পৃষ্ঠার লিঙ্ক' মোড়ানোর জন্য আমার একমাত্র বিকল্প?

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

সুতরাং, আমার কাছে লিঙ্কগুলির একটি তালিকা রয়েছে এবং একটি বর্তমানে সর্বদা নির্বাচিত এবং অন্য সবগুলি নেই। নির্বাচিত নয় এমন লিঙ্কগুলির জন্য, আমি অবশ্যই সেগুলি দেখতে চাই স্বাভাবিক ক্লিকযোগ্য অ্যাঙ্কর ট্যাগ। তবে নির্বাচিত লিঙ্কটির জন্য, কিছু লোকেরা পছন্দ করেন যে লিঙ্কটি ক্লিকযোগ্য থাকে এবং অন্যরা এটি ক্লিকযোগ্য না করে রাখতে পছন্দ করে।

এখন আমি সহজেই প্রোগ্রামটিমেটিকভাবে নির্বাচিত লিঙ্কটির চারপাশে একটি অ্যাঙ্কর ট্যাগগুলি মোড়াতে পারি না। তবে আমি অনুমান করি যে আমি যদি সর্বদা এমন কিছুতে নির্বাচিত লিঙ্কটি लपेटতে পারি তবে এটি আরও মার্জিত হবে:

<a id="current" href="link.html">link</a>

এবং তারপরে বিকাশকারীকে সিএসএসের মাধ্যমে লিঙ্কিং স্টাইলটি নিয়ন্ত্রণ করতে দিন।

Comments

stackoverflow.com/questions/2091168/disable-a-link-using-css

— brianc

আপনি যদি এটি ক্লিক না করতে চান, তবে <span>পরিবর্তে সম্ভবত একটি ব্যবহার করবেন?

— ডেভিড বলেছেন মনিকা

আমাকে ডেভিডের সাথে একমত হতে হবে। UI দৃষ্টান্তগুলি ভাঙবেন না। ব্যবহারকারীর প্রত্যাশাটি হচ্ছে লিঙ্কগুলি ক্লিক করা যায়। যদি এটি ক্লিক না করা যায় তবে এটি আসলেই কোনও লিঙ্ক নয়?

— মিস্টারশারম্যান

পরীক্ষা করে দেখুন stackoverflow.com/questions/2091168/disable-a-link-using-css আরো কিছু সম্ভব উত্তরের জন্য।

— অলিভার

হ্যাঁ, এটি একটি ভয়ানক ধারণা। স্ক্রিন পাঠকরা এখনও লিঙ্কটিকে লিঙ্ক হিসাবে দেখতে পাবে, কারণ এটি একটি লিঙ্ক। অনুসন্ধান ইঞ্জিনগুলিও। আসলে, এইচটিএমএল বোঝে এমন কিছু। এটি করবেন না। এটি সম্পর্কে "মার্জিত" কিছুই নেই।

— পল ডি ওয়েট

Answer 1

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

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

এবং তারপরে ক্লাসটি আপনার এইচটিএমএল কোডে নির্ধারণ করুন:

<a style="" href="page.html" class="inactiveLink">page link</a>

এটি লিঙ্কটিকে ক্লিকযোগ্য নয় এবং কার্সর স্টাইলকে তীর তৈরি করেছে, লিঙ্কগুলির মতো কোনও হাত নয়।

বা এই শৈলী এইচটিএমএল এ ব্যবহার করুন:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

তবে আমি প্রথম পদ্ধতির পরামর্শ দিই।

Comments

আমি ফায়ারফক্স / ক্রোমের উবুন্টু সংস্করণে এটির কাজটি নিশ্চিত করতে পারি। যদিও এটি উইন্ডোজে আইই তে কাজ করে চলেছে তা ভাবছেন।

— জনমারলিনো

এই সমাধান কী হল: pointer-events। এখানে সামঞ্জস্যতা-টেবিলের লিঙ্কটি রয়েছে

— ম্যাসেগোলেহ

@ জনমারলিনো: আইই 9 তে কাজ করে না। উপযুক্ততা টেবিলে masegaloeh লিঙ্ক এ আরও দেখুন

— Howie

সতর্কীকরণ: Tabbing লিঙ্কে ফোকাস সরিয়ে নিয়ে গিয়ে লিংক সক্রিয় করতে Enter ব্যবহার করে হবে এখনও কাজে

— wtho

আমি কার্সার মনে করি না: ডিফল্ট প্রয়োজনীয়। যতক্ষণ না আপনার পয়েন্টার-ইভেন্টগুলি রয়েছে: কোনওটি নয়, এটি কাজ করে বলে মনে হচ্ছে।

— kloddant

Answer 2

সিএসএসের সাথে এটি করা খুব সহজ নয়, কারণ এটি কোনও আচরণগত ভাষা নয় (যেমন জাভাস্ক্রিপ্ট), আপনার অ্যাঙ্কারে জাভাস্ক্রিপ্ট অনক্লিক ইভেন্টটি ব্যবহার করা এবং এটি মিথ্যা হিসাবে ফিরিয়ে দেওয়া একমাত্র সহজ উপায় হ'ল এটি সম্ভবত সংক্ষিপ্ততম কোড আপনি এটির জন্য ব্যবহার করতে পারেন:

<a href="page.html" onclick="return false">page link</a>

Comments

@ মাইক এটি ক্লিকটি কিছুই করতে পারে না তবে বোতামটি এখনও ক্লিকযোগ্য বলে মনে হচ্ছে।

— acostache

@acostache স্টাইল ব্যবহার করে = "কার্সার: ডিফল্ট;" পয়েন্টারে সাহায্য করা উচিত

— জন

প্রশ্নটি ছিল: "সিএসএস ব্যবহার করে", সুতরাং এটি ভাল তবে সঠিক উত্তর নয়।

— রোমান হল্জনার

তিনটি মূল কারণে অনক্লিক = "রিটার্ন মিথ্যা" না দিয়ে CSS ব্যবহার করা ভাল: 1- সিএসএসের সাহায্যে আপনি ডিফল্ট তীরটিতে ডিফল্ট লিঙ্কের মাউস কার্সারটি পরিবর্তন করতে পারেন। 2- এটি বিঘ্নিত জেএস। 3- এটি আসলে কোনও মান ফিরিয়ে দিচ্ছে, প্রতিবার আপনি লিঙ্কটিতে ক্লিক করলে আপনি মিথ্যা ফিরিয়ে দিতে চান না।

— ডিয়েগো অনানু

Answer 3

হ্যাঁ .. এটি CSS ব্যবহার করা সম্ভব is

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Comments

এটি সবচেয়ে পরিষ্কার উপায়, তবে একটি সতর্কতা: এটি কেবলমাত্র আইই 11 + ক্যানিউজ ডটকম

— পিক্সেলফ্রেইক

Answer 4

বা কোনও ইভেন্ট সহ খাঁটি এইচটিএমএল এবং সিএসএস:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

Comments

-1 কারণ সমস্যাটি সমাধানের এটি বেশ জটিল / বিভ্রান্তিকর উপায়। এটি প্রশ্নটি যা বলছে তা আসলেই করে না (লিঙ্কটি নিষ্ক্রিয় করে তোলে)। এটি কেবল একটি অদৃশ্য উপাদান সহ লিঙ্কটি কভার করে। দিয়েগো এর উত্তর অনেক পরিষ্কার।

— বিকাশ করছে

@ বিকাশকারী আমি মনে করি ডিয়েগোর উত্তরটিও ভাল এবং এটিকে উচ্চতর ভোট দেওয়া উচিত এবং গ্রহণযোগ্য হওয়া উচিত। তবে, আমি যখন এই উত্তরটি লিখেছিলাম (3 বছর আগে) pointer-eventsপ্রায় কোনও ব্রাউজার সমর্থন ছিল না।

— পল

@ পলপ্রো আমি এক ধরণের ভেবে দেখেছি। ডাউনভোটের জন্য দুঃখিত! সর্বাধিক আপ টু ডেট উত্তর শীর্ষে রয়েছে তা নিশ্চিত করতে চাই। উত্তরের জন্য ধন্যবাদ.

— বিকাশ করছে

Answer 5

সিএসএস আচরণ নয়, উপস্থাপনাকে প্রভাবিত করার জন্য ডিজাইন করা হয়েছিল।

আপনি কিছু জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Answer 6

আরও একটি অ-বিঘ্নিত উপায় (ধরে নিচ্ছেন আপনি jQuery ব্যবহার করেন):

এইচটিএমএল:

<a id="my-link" href="page.html">page link</a>

javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

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

Comments

আপনি জানেন যে আপনি খুব সহজেই একই কাজটি করতে নন jQuery কোড লিখতে পারেন যা বেশ খানিকটা দ্রুত চলবে: document.getElementById('my-link').onclick = function(){ return false; };

— পল

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

— পিক্সেলফ্রিয়াক

সিরিয়াসলি? ব্রাউজারটি অনক্লিক বা getulementById সমর্থন করে না। ঠিক আছে, সুতরাং আই 2 অনক্লিক সমর্থন করে না, তবে এটি সিএসএসকে সমর্থনও করে না ... এবং আমি আপনার আইপি 2 তে আপনার jQuery কোডটি কার্যকরভাবে সন্দেহ করব।

— পল

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

— পল

@ পলপ্রো এই আলোচনাটি লেখকের প্রয়োজনীয়তা ছাড়াই চলছে। প্রতিটি কাঠামোর এর উদ্দেশ্য রয়েছে। যদি তিনি জেএসে সাবলীল না হন এবং কেবল একটি মম-এন-পপ ওয়েবসাইট করছেন এবং কিছু ডিওএম উপাদান চালনা করার প্রয়োজন পড়ে তবে তার পক্ষে একটি কাঠামো ব্যবহার করা আরও সহজ হবে। যে কোনও ফ্রেমওয়ার্ক ব্যবহারে আপনার অনীহা হাস্যকর। পিএইচপি সি তে লেখা হয় তার অর্থ কি আপনার সি লেখা উচিত এবং পিএইচপি ব্যবহার করা উচিত নয়? আইওএসের ইউআইকিট, কোর ডেটা, কোয়ার্টজ ইত্যাদি রয়েছে ফ্ল্যাশটিতে প্রচুর পরিমাণে তৃতীয় পক্ষের লাইব্রেরি ব্যবহৃত হয়। আবার, প্রতিটি কাঠামোর এর উদ্দেশ্য রয়েছে। একজন বিশুদ্ধবাদী, অন্তর্নির্মিত অন্তর্নিহিত মানসিকতা কাউকে সাহায্য করবে না।

— পিক্সেলফ্রিয়াক

Answer 7

উত্তরটা হচ্ছে:

<a href="page.html" onclick="return false">page link</a>

Answer 8

এটি CSS এ করা যায় এবং এটি খুব সাধারণ। "এ" কে "পি" তে পরিবর্তন করুন। আপনার "পৃষ্ঠাগুলি লিঙ্ক" কোথাও কোথাও নিয়ে যায় না যদি আপনি এটিকে আবদ্ধ করতে চান।

যখন আপনি আপনার সিএসএসকে এই নির্দিষ্ট "পি" তে একটি হোভার অ্যাকশন করতে বলুন তখন এটি বলুন:

(এই উদাহরণের জন্য আমি "পি" "উদাহরণ" আইডি দিয়েছি)

#example
{
  cursor:default;
}

এখন আপনার কার্সারটি পুরো পৃষ্ঠায় যেমন থাকবে তেমন থাকবে।

Answer 9

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>

Comments

এর জন্য আলাদা উত্তর যুক্ত করার দরকার নেই, @ কর্কের উত্তর সম্পর্কে আপনার মন্তব্য যথেষ্ট, চিন্তিত। সদৃশ উত্তরগুলি এড়িয়ে চলুন।

— MAChitgarha