কোনও অ্যাঙ্কর ট্যাগ কীভাবে রেফারেন্স করবেন?

Question

আমি jQuery ব্যবহার করি, আমার কিছু অ্যাঙ্কর ট্যাগ কোনও ক্রিয়া সম্পাদন করা প্রয়োজন।

আমি সাধারণত এটি লিখি:

<a href="#">link</a>

তবে এটি পৃষ্ঠার শীর্ষকে বোঝায়!

Comments

কারণ jquery ক্লিক ইভেন্টটি পরিচালনা করবে তাই আমি লিঙ্কটিটি একটি আচার লিঙ্কের মতো হতে চাই তবে জাভাস্ক্রিপ্ট ফাংশনের মতো আচরণ করব

— আহমেদ

কার্যকর প্রতারিত: stackoverflow.com/questions/265478/preventdefault-on-an-a-tag

— annakata

নীচের উত্তরের একটিতে যেমন উল্লেখ করা হয়েছে: আপনি যদি কোনও সংস্থানকে কোনও সংস্থানকে নির্দেশ করতে চান না, তবে এ উপাদানটি ব্যবহার করবেন না।

— ম্যাথিয়াস বাইনেস

hrefএটিতে বৈশিষ্ট্যটি ব্যবহার করবেন না ।

— vsync

জাভা স্ক্রিপ্ট লিঙ্কগুলির জন্য Href বৈশিষ্ট্যের

— অরিওল

Answer 1

আপনি যদি এটির কোনও দিকে ইঙ্গিত করতে না চান তবে আপনার সম্ভবত <a>অ্যাঙ্কর ট্যাগটি ব্যবহার করা উচিত নয় ।

আপনি যদি কোনও লিঙ্কের মতো দেখতে কিছু দেখতে চান তবে কোনও লিঙ্কের মতো কাজ না করেন তবে উপযুক্ত উপাদানটি (যেমন <span>) ব্যবহার করে সিএসএস ব্যবহার করে স্টাইল করা ভাল:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

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

$('#fake-link-1').click(function() {
    /* put your code here */
});

Comments

এটিতে একটি সমস্যা রয়েছে: এটি ট্যাব-নেভিগেশনের অনুমতি দেয় না।

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

— ফ্রেডরিক মের্ক

এছাড়াও একটি অ্যাক্সেসযোগ্যতার সমস্যা। আপনি একটি বোতাম উপাদান ব্যবহার করে এটি সমাধান করতে পারেন (জাভাস্ক্রিপ্ট থেকে উত্পন্ন যাতে জেএসএসবিহীন ব্যবহারকারীরা ভাঙা নিয়ন্ত্রণ পান না)।

— কোয়ান্টিন

এটির জন্য এখানে একটি দ্রুত সমাধান রয়েছে: একটি লিঙ্কবিহীন উপাদানের ট্যাবিনডেক্স = "0" বেশিরভাগ আধুনিক ব্রাউজারগুলিতে কীবোর্ড নেভিগেশন সক্ষম করবে।

— ম্যাথিয়াস বাইনেন্স

আরেকটি 'সমস্যা' হ'ল আপনি সিএসএস করবেন না: হোভার সিউডো ক্লাসটি এমন উপাদানগুলিতে কাজ করবে না যেগুলি আই আই লিঙ্ক নয়। তবে যেহেতু আপনি জাভাস্ক্রিপ্টের মাধ্যমে এই উপাদানগুলি যুক্ত করছেন (কমপক্ষে, আপনার হওয়া উচিত), আপনি ঠিক পাশাপাশি একটি স্ক্রিপ্ট লিখতে পারেন যা আবদ্ধ হওয়ার সময় উপাদানটিতে একটি .ওভার ক্লাস যুক্ত করে।

— ম্যাথিয়াস বাইনেস

Answer 2

নিখুঁত সমাধানের চেয়ে কয়েকটি কম রয়েছে:

1. একটি জাল নোঙ্গর লিঙ্ক

<a href="#">

সমস্যা: লিঙ্কটি ক্লিক করা পৃষ্ঠার শীর্ষে ফিরে আসে

২. 'এ' ব্যতীত অন্য কোনও ট্যাগ ব্যবহার করা

একটি স্প্যান ট্যাগ ব্যবহার করুন এবং ক্লিকটি পরিচালনা করতে jquery ব্যবহার করুন

সমস্যা: কীবোর্ড নেভিগেশন বিরতি দেয়, ম্যানুয়ালি হোভার কার্সারটি পরিবর্তন করতে হবে

3. একটি জাভাস্ক্রিপ্ট শূন্য ফাংশন লিঙ্ক

<a href="javascript:void(0);">
<a href="javascript:;">

সমস্যা: আইই মধ্যে চিত্রগুলি লিঙ্ক করার সময় বিরতি

সমাধান

যেহেতু এই সকলেরই তাদের সমস্যা রয়েছে তাই আমি যে সমাধানটি স্থির করেছি তা হ'ল নকল অ্যাঙ্কারের সাথে লিঙ্ক করা এবং তারপরে অনক্লিক পদ্ধতি থেকে মিথ্যা ফিরিয়ে দেওয়া:

<a href="#" onClick="return false;">

সমাধানগুলির সর্বাধিক সংক্ষিপ্ত নয়, তবে এটি উপরের পদ্ধতিগুলি দিয়ে সমস্ত সমস্যার সমাধান করে।

Comments

আমি সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করি: শূন্য (0); যোগাযোগ করুন, কারণ # ব্যবহার করা মাউস ওভার ফায়ারফক্সের বারে বর্তমান URL টি প্রদর্শন করে যা ব্যবহারকারীর জন্য বিভ্রান্তিকর হতে পারে।

— লুকাফেরারিও

breaks when linking images in IEএটার মানে কি?

— ইউজিন

@ ইউজিন এই প্রশ্নটি এখন 3 বছরের পুরনো, তবে IE কোনও শূন্য ফাংশনের লিঙ্কের দ্বারা ঘেরাও করলে চিত্রগুলি অদৃশ্য হয়ে যায় used কখন এটি ঠিক করা হয়েছিল তা নিশ্চিত নয়, তবে এটি IE10 এ কাজ করে, যা আমি ইনস্টল করেছি। আমি ব্যক্তিগতভাবে এখন ব্যবহার করি<a href="javascript:;">

— জাইউস

আমি সেখানে মন্তব্যগুলিও ব্যবহার করেছি: <a href="javascript:void(0); // বৈশিষ্ট্য প্যালেট "> দেখান। এই পদ্ধতিতে, ব্যবহারকারীরা ঘোরাফেরা করার পরে, তারা মন্তব্যটি দেখে যা তাদের ক্লিক করার সময় কী প্রত্যাশা করা উচিত তা বোঝাতে পারে। (যদিও আপনি একটি টুলটিপও ব্যবহার করতে পারেন))

— রবিন জিম্মারম্যান

দেখে মনে href="javascript:"হচ্ছে এটিও যথেষ্ট এবং সর্বশেষতম বড় ব্রাউজারগুলিতে কাজ করে। সেমিকোলনের দরকার নেই, প্রকৃতপক্ষে পিএইচপিস্টোরম এটিকে সরিয়ে দেওয়ার পরামর্শ দেয়।

— jlh

Answer 3

এটিকে কিছুতেই না করার জন্য এটি ব্যবহার করুন:

<a href="javascript:void(0)"> ... </a>

Comments

বা ঠিক <a href="javascript:;">। পিএস target=_blankযদিও এর সাথে কাজ করে না

— অ্যালেক্স

Answer 4

এটি হ্যান্ডেল করার সঠিক উপায়টি আপনি লিঙ্কটি হ্যান্ডেল করার সময় jQuery এর সাথে লিঙ্কটি "ব্রেক" করা

এইচটিএমএল

<a href="#" id="theLink">My Link</a>

জাতীয়

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

এই চূড়ান্ত দুটি কল ব্রাউজারটিকে ক্লিকটির ব্যাখ্যা দিয়ে থামায়।

Comments

যদিও এটি "যথাযথ" বলে মনে হয় কারণ এটি ইভেন্টের বুদবুদ বন্ধ করে দেয়, "মিথ্যা প্রত্যাবর্তন" অনেক কম ভার্বোস এবং একই কাজ করে। আপনি যদি ইতিমধ্যে যা করতে চান তবে তা যদি আপনার ইতিমধ্যে jQuery এর মাধ্যমে লিঙ্কগুলিতে ক্লিক করা ইভেন্ট হ্যান্ডলারগুলি থাকে।

— আলেম্ব

Answer 5

এটি করার মতো অনেকগুলি উপায় রয়েছে

যোগ এবং hrefগুণাবলী না

<a name="here"> Test <a>

আপনি href এর পরিবর্তে অন্লিক ইভেন্ট যুক্ত করতে পারেন

<a name="here" onclick="YourFunction()"> Test <a>

অথবা আপনি এই মত শূন্য ফাংশন যোগ করতে পারেন যা সেরা উপায় হবে

<a href="javascript:void(0);"> 
<a href="javascript:;">

Comments

নাম বৈশিষ্ট্য প্রয়োজন?

— পেট্রুস থেরন

পুনঃটুইট করুন ।

— পুনিত গজ্জর

এটি পূর্ব-বিদ্যমান উত্তরের একটি

— ছাঁটাই

আপনার অ্যাঙ্কর ট্যাগের স্টাইলটি সেট করতে ভুলবেন না যদি আপনি hrefএন্ট্রিবিউটটি সরিয়ে ফেলেন কারণ এটি হাইপারলিংকের মতো আচরণ করবে না (যদিও অনক্লিক এখনও কাজ করে) আপনার পছন্দসই উপাদান cursor: pointer;এবং :hoverনির্বাচককে পুনরায় সেট করতে হবে ।

— পার্টাক

@ পার্ট্যাক কারেক্ট .. লক্ষ্য করার জন্য ধন্যবাদ

— পুনিত গজ্জর

Answer 6

আপনি কিছুই বলতে চাইছেন না?

<a href='about:blank'>blank page</a>

অথবা

<a href='whatever' onclick='return false;'>won't navigate</a>

Comments

সম্মতি জানানো হয়েছে - কেবল আপনার jQuery পদ্ধতি এবং

— ভয়েলা

Answer 7

আমি মনে করি আপনি চেষ্টা করতে পারেন

<a href="JavaScript:void(0)">link</a>

আমি কেবল এখানে দেখতে পাই উচ্চ স্তরের ব্রাউজার সুরক্ষা জাভাস্ক্রিপ্ট কার্যকর করতে অনুরোধ জানাতে পারে।

যদিও এটি এর চেয়ে সহজ উপায়

<a href="#" onclick="return false;">Link</a>

এই অল্প ব্যবহার করা উচিত

কিছু নিদর্শনের জন্য এই নিবন্ধটি পড়ুন https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Comments

সঠিক উত্তর, ট্যাব নেভিগেশন অনুমতি দেয়।

— কে - এসও-তে বিষক্রিয়া বাড়ছে।

Answer 8

নতুন ওয়েব মান (HTML5) প্রতিবিম্বিত করতে এই উত্তরটি আপডেট করা উচিত।

এই:

<a tabindex="0">This represents a placeholder hyperlink</a>

... বৈধ এইচটিএমএল 5। ট্যাবিনডেক্স অ্যাট্রিবিউট এটিকে সাধারণ হাইপারলিঙ্কগুলির মতো কীবোর্ডকে ফোকাসযোগ্য করে তোলে। আপনি spanপূর্বে উল্লিখিত হিসাবে এটির জন্য উপাদানটিও ব্যবহার করতে পারেন তবে আমি aউপাদানটি আরও মার্জিত বলে মনে করি।

দেখুন: https://w3c.github.io/html-references/a.html
এবং: https://html.spec.whatwg.org/m মাল্টিপেজ / লিঙ্কস html#attr-hyperlink-href

Comments

এটি বৈধ এইচটিএমএল 4, তবে এটি কোনও লিঙ্ক হিসাবে অ্যাঙ্করকে স্টাইল করবে না।

— ইন্টারজয়

আমি জানতাম না এটি বৈধ এইচটিএমএল 4, তবে এইচটিএমএল 5 স্পষ্টভাবে ব্যবহারের ক্ষেত্রে উল্লেখ করেছে। এবং শৈলীগুলি যা href বৈশিষ্ট্যটিকে লক্ষ্য করে না ঠিক ঠিক কাজ করবে, কেবলমাত্র ডিফল্ট ব্রাউজার শৈলীই সমস্যা হতে পারে।

— aross

clickব্যবহারকারী যখন উপাদান এবং প্রেসগুলি প্রবেশের দিকে ফোকাস করে (ফায়ারফক্স ৫১ এ পরীক্ষা করা হয়) তখন এটি ইভেন্টটিকে ট্রিগারও করে না ।

— টরভিন

@torvin, এটা সহজ। keydownইভেন্টটি ব্যবহার করুন ।

— পুরো '

snazzy quirk, তবে উইন্ডো 10 এ এটি উপাদানটির চারপাশে একটি সীমানাযুক্ত বাক্স যুক্ত করেছে

— 1-14x0r

Answer 9

<a>ট্যাগের hrefট্যাগ সম্পত্তির জন্য এখানে তিনটি উপায় যা কিছুই উল্লেখ করে না:

<a href="JavaScript:void(0)"> link </a>

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>

Comments

এই মাত্র সদৃশ বর্তমানে সর্বোচ্চ উত্তর ভোট দিয়েছেন , কিন্তু কম তথ্য সহ

— aross

Answer 10

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে আমি ভেবেছিলাম আমি যেভাবেই আমার দুটি সেন্ট যুক্ত করব:

এটি লিঙ্কটি কী করতে চলেছে তার উপর নির্ভর করে, তবে সাধারণত, আমি লিঙ্কটি একটি ইউআরএলটিতে নির্দেশ করব যা সম্ভবত একই জিনিস প্রদর্শিত / করানো হতে পারে, উদাহরণস্বরূপ, যদি আপনি বক্স পপ আপ সম্পর্কে কিছুটা তৈরি করছেন:

<a id="about" href="/about">About</a>

তারপরে jQuery সহ

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

এইভাবে, খুব পুরানো ব্রাউজারগুলি (বা জাভাস্ক্রিপ্ট অক্ষম ব্রাউজারগুলি) এখনও পৃষ্ঠা সম্পর্কে একটি পৃথক নেভিগেট করতে পারে, তবে আরও গুরুত্বপূর্ণ, গুগল এটিও বেছে নেবে এবং প্রায় পৃষ্ঠার সামগ্রীগুলি ক্রল করবে।

Answer 11

আপনার যে সমস্ত লিঙ্কগুলি বন্ধ করতে চান তার অবশ্যই href="#!"(বা আপনার যে কোনও কিছু সত্যই আছে) রয়েছে তা নিশ্চিত করুন এবং তারপরে এটি ব্যবহার করুন:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Answer 12

আপনার কোনও গুনবিহীন এইচটিএমএল অ্যাঙ্কর ( aট্যাগ) থাকতে পারে href। hrefবৈশিষ্ট্যটি ছেড়ে দিন এবং এটি কোনও কিছুর সাথে লিঙ্ক করবে না:

<a>link</a>

Comments

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

— মহসিন

যদি অন্য কেউ যদি এইচটিএমএল 5 বৈধ কিনা তা ভাবছেন, তবে উত্তর হ্যাঁ :) স্ট্যাকওভারফ্লো . com/a/33046203/5323892 । মানক পৃষ্ঠা থেকে এখানে উদাহরণ (তৃতীয় লি আইটেমটি দেখুন): <nav> <ul> <li> <a href="https://stackoverflow.com/"> হোম </a> </li> <li> <a href = "/ খবর "> সংবাদ </a> </ li> <li> <a> উদাহরণ </a> </li> <li> <a href="https://stackoverflow.com/legal"> আইনী </a> </li> </ ul> </nav>

— মহসিন

এটি কাজ করে তবে আপনি যদি মাউস পয়েন্টারটি আঙুলের পরিবর্তিত করতে চান তবে @ রুতেশ মাখিজানীর উত্তর অনুসারে কেবল href = "জাভাস্ক্রিপ্ট: শূন্য (0)" যুক্ত করুন।

— তারিক

Answer 13

আমার পক্ষে কাজ করা একমাত্র জিনিসটি ছিল উপরের সংমিশ্রণ:

প্রথমে উল মধ্যে লি

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

তারপরে লোডট্যাব 2_1 এ আমি ম্যানুয়ালি ট্যাব ডিভাইসগুলি স্যুইচ করেছি

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

এর কারণ এটির সংযোগ বিচ্ছিন্নকরণ ট্যাবগুলিতে ক্রিয়া সংযোগ বিচ্ছিন্ন করে

প্রাথমিক ট্যাব জিনিস পরিবর্তন করলে আপনাকে ম্যানুয়ালি ট্যাব স্টাইলিংও করতে হবে

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Answer 14

আপনি এটি দ্বারা করতে পারেন

<a style='cursor:pointer' >Link</a>

Answer 15

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

এটি আমার অ্যাঙ্কর ট্যাগ ছিল। সুতরাং অন ক্লিকের উপর মিথ্যা ফিরিয়ে দিন = "" ইভেন্টটি এখানে ব্যবহারযোগ্য নয়। আমি স্রেফ href = "#" সম্পত্তি অপসারণ করেছি এবং এটি নীচের মতো আমার জন্য কাজ করেছে

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

এবং আমি এই সিএসএস যুক্ত করা প্রয়োজন।

.SomeClass
{
    cursor: pointer;
}

Comments

তুমি এর সাথে কি বোঝাতে চাও? কি সুপারিশ করা হয় এবং কেন?

— বার্ক

আলাদা ফাইলগুলিতে জাভাস্ক্রিপ্ট এবং এইচটিএমএল রাখার জন্য এটির ভাল অনুশীলন, এখানে একটি বিশদ উত্তর: স্ট্যাকওভারফ্লো

— আলেকজান্দ্রু সেভেরিন

Answer 16

আমি একটি ওয়ার্ডপ্রেস সাইটে এই সমস্যাটির মুখোমুখি হয়েছি। ড্রপডাউন মেনুতে শিরোনামগুলির মধ্যে সর্বদা বৈশিষ্ট্য থাকে href=""এবং শিরোনাম প্লাগইন ব্যবহার করা হয় কেবলমাত্র স্ট্যান্ডার্ড ইউআরএলকে। পাদলেখটিতে এই কোডটি চালানো ছিল সবচেয়ে সহজ সমাধান:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

এটি ফাঁকা অ্যাঙ্কারগুলিকে কিছু করতে বাধা দেবে।

Answer 17

href="javascript:void(0)"আপনার অ্যাঙ্কর ট্যাগে এই জাতীয় ফাংশনটি ব্যবহার করে আর সমর্থন করে না, তবে এখানে এমন কিছু রয়েছে যা বেশ ভালভাবে কাজ করে।

<a href="#" onClick={() => null} >link</a>

Answer 18

আমি জানি এটি একটি jQuery প্রশ্ন হিসাবে ট্যাগ করা হয়, তবে আপনি এর উত্তর AngularJS দিয়েও দিতে পারেন।

আপনার উপাদানটিতে, এনজি-ক্লিক নির্দেশিকা যুক্ত করুন এবং $ ইভেন্টের ভেরিয়েবলটি ক্লিক করুন যা ক্লিক ইভেন্ট ... এর ডিফল্ট আচরণ রোধ করুন:

<a href="#" ng-click="$event.preventDefault()">

আপনি এমনকি function ইভেন্ট পরিবর্তনশীল একটি ফাংশনে পাস করতে পারেন:

<a href="#" ng-click="doSomething($event)">

এই ফাংশনে, আপনি ক্লিক ইভেন্টের সাথে যা খুশি তা করতে পারেন।