আমি কীভাবে জাভাস্ক্রিপ্টে কোনও href লিঙ্ক অক্ষম করব?


106

আমার একটি ট্যাগ রয়েছে <a href="#"> Previous </a> 1 2 3 4 <a href="#"> Next </a>এবং কিছু পরিস্থিতিতে আমি এই ট্যাগটি সম্পূর্ণ অক্ষম করে রাখতে চাই।

মন্তব্যগুলি থেকে কোড (লিঙ্কটি এইভাবে উত্পন্ন হয়)

if (n_index != n_pages) 
    a = a+'<li><a href="#" onclick="javascript:paginateAjaxPage('+(n_index+1) +','+stype+');">></a></li><li><a href="#" onclick="javascript:paginateAjaxPage('+n_pages+','+stype+');" >>></a></li>'; 
else 
    a = a+'<li><a style="cursor: pointer;" onclick="return false;">></a></li><li><a style="cursor: pointer;" onclick="return false" >>></a></li>'; 
a = a+'</ul></div>';

কিছু পরিস্থিতিতে আমি এই ট্যাগটি পুরোপুরি অক্ষম করতে চাই : এর অর্থ কী? কি অবস্থা?
ফেলিক্স ক্লিঙ

1
অক্ষম দ্বারা আপনি বোঝাতে চাইছেন যে পাঠ্যটি এখনও লিঙ্ক হিসাবে প্রদর্শিত হবে (আন্ডারলাইন এবং সমস্ত কিছু) তবে ক্লিক করার পরে কিছুই করবেন না?
শ্যাডো উইজার্ড আপনার পক্ষে কান

উত্তর:


190

আপনি যখন ক্লিকে ব্যবহারকারীকে পুনঃনির্দেশিত করতে চান না তখন এটি চেষ্টা করুন

<a href="javascript: void(0)">I am a useless link</a>

54
কীভাবে <a href='javascript:;'>I am a shorter useless link</a>?
চার্লি শ্লিয়েসার

16
এমনকি সেমিকোলনেরও দরকার নেই।
এমভিসিএইচআর

44
আপনার ওয়েব বিকাশকারীরা কোডটি ভাঁজ করা এবং দুর্দান্ত (কাদের জন্য? ব্রাউজার) দেখতে এখন লক্ষ লক্ষ ট্যাব \t, লাইন ফিড \nএবং স্পেস রেখেছেন এবং এখন god বাইট void(0)এবং / অথবা একটি ;o শ্বর সম্পর্কে চিন্তিত ।

3
আমি উপরের মন্তব্যে কিছুটা দ্বিমত পোষণ করছি। কখনও কখনও জিনিসগুলি বর্ণনামূলক হওয়া প্রয়োজন এবং অন্যান্য ক্ষেত্রে সহজ এবং স্মরণ রাখা সহজ। আমি "জাভাস্ক্রিপ্ট:" পছন্দ করব।
ল্যামি

2
আমার মতে - Millions millions of tabs\t, line feeds\n and spaces- হ্যাঁ, এই কোডটি বোঝা সহজ করে, যদিও void(0)তা নয়। এটি কেন সরানো উচিত বা যতটা সম্ভব সংক্ষিপ্ত হওয়া উচিত ts উদাহরণস্বরূপ এখানে সংক্ষিপ্ত - বোঝার জন্য (পড়ার) জন্য "সংক্ষেপণ" বা বাইটস ইকোনি নয়। :)
চেরি

71

আপনি এই স্টাইল শ্রেণীর সাহায্যে একটি পৃষ্ঠাতে সমস্ত লিঙ্ক নিষ্ক্রিয় করতে পারেন:

a {
    pointer-events:none;
}

এখন অবশ্যই কৌশলটি লিঙ্কগুলি নিষ্ক্রিয় করা হবে কেবল যখন আপনার প্রয়োজন হবে, এটি এটি করতে হবে:

একটি খালি এ শ্রেণি ব্যবহার করুন:

a {}

তারপরে আপনি লিঙ্কগুলি নিষ্ক্রিয় করতে চাইলে এটি করুন:

    GetStyleClass('a').pointerEvents = "none"

    function GetStyleClass(className)
    {
       for (var i=0; i< document.styleSheets.length; i++) {
          var styleSheet = document.styleSheets[i]

          var rules = styleSheet.cssRules || styleSheet.rules

          for (var j=0; j<rules.length; j++) {
             var rule = rules[j]

             if (rule.selectorText === className) {
                return(rule.style)
             }
          }
       }

       return 0
    }

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

লিঙ্কগুলি পুনরায় সক্রিয় করতে:

GetStyleClass('a').pointerEvents = ""

ব্রাউজারের সামঞ্জস্যতা সম্পর্কিত তথ্যের জন্য এই পৃষ্ঠাটি http://caniuse.com/pointer-events দেখুন

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

যদি আপনি কেবল একটি লিঙ্ক নিষ্ক্রিয় করতে চান (আমি কেবল বুঝতে পারি যে এটিই প্রশ্ন ছিল), আমি এমন একটি ফাংশন ব্যবহার করব যা ম্যানুয়ালি সেই শর্তের ভিত্তিতে বর্তমান পৃষ্ঠার ইউআরএল সেট করে, না not (আপনি যে সমাধানটি গ্রহণ করেছেন ঠিক তেমন)

এই প্রশ্নটি আমার ভেবে অনেক সহজ ছিল :)


3
pointer-events:none;আমি অবশ্যই ট্যাগটির জন্য আপনাকে জানতাম না, আপনাকে ধন্যবাদ জানাতে হবে !
জনাথন ব্রাউন 14

3
এই চমত্কার, কিন্তু এটা এর লক্ষ করেন, পয়েন্টার-ঘটনা মূল্য সামনে সংস্করণ 11. আই ই সমর্থিত নয় caniuse.com/#feat=pointer-events
JakeRobb

2
আমি বিশ্বব্যাপী শৈলীর সম্পাদনা করে এই পৃষ্ঠায় এটি চেষ্টা করে দেখলাম তবে আমি আপনাকে
উজ্জীবিত

এটা ছিলো অসাধারন! jquery ছাড়াই এটি করার একটি উপায় খুঁজে পেতে খুব কঠিন সময় কাটানো হয়েছিল।
হেসম খাকি

আমি সিএসএস উত্তরটি অন্যদের চেয়ে ভাল পছন্দ করি কারণ এর জন্য লিঙ্কটির href কে পরিবর্তনের প্রয়োজন হয় না, আমার ক্ষেত্রে এটি গতিশীল।
পল

16

আপনি কেবল এটি একটি খালি হ্যাশ দিতে পারেন:

anchor.href = "#";

বা যদি এটি "অক্ষম" পর্যাপ্ত পরিমাণে না হয় তবে ইভেন্ট হ্যান্ডলারটি ব্যবহার করুন:

anchor.href = "javascript:void(0)";

21
# সুপারিশ করা হয় না, কেন? এটি বিবেচনা করুন, আপনার অক্ষম লিঙ্কটি একটি দীর্ঘ পৃষ্ঠার নীচে / পাদদেশে প্রদর্শিত হবে, লিঙ্কটি ক্লিক করা আপনাকে শীর্ষে নিয়ে যাবে, "জাভাস্ক্রিপ্ট :;" যথেষ্ট
কুমার

3
# 1 শীর্ষে ফিরে যাবে না
সিটিয়া

3
@ বিক্সি, এটি 1পরে যুক্ত করা হয় কিনা এর আইডি সহ কোনও উপাদানটিতে স্ক্রোল করবে ।
PS2goat

আচ্ছা হ্যাঁ এটা সুস্পষ্ট। জেনেও যে কখনই কোনও আইডি = 1 তৈরি করবেন না। এটি কেবলমাত্র একটি সম্ভাব্য কাজ
22

আপনার বর্তমান পৃষ্ঠার চেয়ে <বাস>> আলাদা থাকলে এটি কাজ করবে না
মিগুয়েল পাইতো

8

JQuery ব্যবহার করে এটি ব্যবহার করে দেখুন:

$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

5
anchor.href = null;


1
ক্রোম এখন এই উত্তরের জন্য নাল নামের একটি পৃষ্ঠায় নেভিগেট করার চেষ্টা করেছে
অরেঞ্জকিং 89

5
(function ($) {
    $( window ).load(function() {
        $('.navbar a').unbind('click');
        $('.navbar a').click(function () {
            //DO SOMETHING
            return false;
        });
    });
})(jQuery);

আমি এই উপায় বাস্তবায়ন সহজ। এবং এর সুবিধা হ'ল আপনি জেএস। আপনার এইচটিএমএল এর ভিতরে নয় তবে একটি ভিন্ন ফাইলে। আমি মনে করি এটি আনবাইন্ড ছাড়া। উভয় ঘটনা এখনও সক্রিয়। নিশ্চিত না. তবে একটি উপায়ে আপনার কেবলমাত্র এই একটি ইভেন্টের প্রয়োজন


1
Is unbindপ্রয়োজনীয়? আমি বিশ্বাস করি return falseবা e.preventDefault()যথেষ্ট হবে।
তাসোস কে।

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


4

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

var testHideNav = function() {
    var aTags = document.getElementsByTagName('a'),
        atl = aTags.length,
        i;

    for (i = 0; i < atl; i++) {
        if (aTags[i].innerText == "Previous") {
            if (true) { // your condition to disable previous
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        } else if (aTags[i].innerText == "Next") {
            if (false) { // your condition to disable next
                aTags[i].style.visibility = "hidden";
            } else {
                aTags[i].style.visibility = "visible";
            }
        }
    }
};

তারপরে testHideNav()আপনার অবস্থার পরিবর্তন হয়েছে কিনা তা যাচাই করে নেওয়ার দরকার হলে চালনা করুন ।


3

পরিবর্তে একটি স্প্যান এবং একটি জাভাস্ক্রিপ্ট অনক্লিক ব্যবহার করুন। কিছু ব্রাউজার আপনার লিঙ্ক এবং "#" href থাকলে "জাম্প" করে "


আপনি একটি উদাহরণ দিতে পারেন দয়া করে? কিছু ব্রাউজার "লাফানো" সত্য .. :)
অরূপ রক্ষিত

আপনাকে দেখতে ভাল, @ অরূপরক্ষিত =) স্বীকৃত উত্তরটি এটির সাথে javascript: void(0);বা এটি করে javascript:;। আপনি যদি রেলগুলি থেকে রেন্ডার করছেন তবে যেখানে আপনি এটি অক্ষম করতে চান তার পরিবর্তে কেবল একটি স্প্যান সরবরাহ করুন।
আবদো

3

এটিও সম্ভব:

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

আপনার ফাংশনটি দিয়ে লিঙ্কটি কোথাও যায় না চালানো হবে।


দয়া করে বিদ্যমান উত্তর পর্যালোচনা করুন
সেস

3

আমার অনুরূপ প্রয়োজন ছিল, তবে আমার অনুপ্রেরণাটি ছিল লিঙ্কটি ডাবল-ক্লিক হতে আটকাতে। আমি jQuery ব্যবহার করে এটি সম্পাদন করেছি:

$(document).ready(function() {
    $("#myLink").on('click', doSubmit);
});

var doSubmit = function() {
    $("#myLink").off('click');
    // do things here
};

এইচটিএমএল দেখে মনে হচ্ছে:

<a href='javascript: void(0);' id="myLink">click here</a>

2

সুতরাং উপরের সমাধানগুলি লিঙ্কটি কাজ না করে, তবে এটি দৃশ্যমান (এএএএফসিটি) করবেন না যে লিঙ্কটি আর বৈধ নয়। আমি এমন একটি পরিস্থিতি পেয়েছি যেখানে আমি একটি সিরিজ পৃষ্ঠা পেয়েছি এবং বর্তমান পৃষ্ঠায় যে লিঙ্কটি দেখিয়েছে তার লিঙ্কটি (এবং এটি অক্ষম করে দেওয়া উচিত) অক্ষম করতে চাই।

তাই:

window.onload = function() {
    var topics = document.getElementsByClassName("topics");
    for (var i = topics.length-1; i > -1; i-- ) {
        for (var j = topics[i].childNodes.length-1; j > -1; j--) {
             if (topics[i].childNodes[j].nodeType == 1) {
                if (topics[i].childNodes[j].firstChild.attributes[0].nodeValue == this.n_root3) {
                    topics[i].childNodes[j].innerHTML = topics[i].childNodes[j].firstChild.innerHTML;
                }
            }
        }
    }
}

এটি লিঙ্কগুলির তালিকার মধ্যে চলে যায়, বর্তমান পৃষ্ঠায় নির্দেশ করে এমন একটিটি খুঁজে পায় (n_root3 স্থানীয় জিনিস হতে পারে তবে আমি ধারণা করি documentকিছু একই রকম থাকতে হবে), এবং লিঙ্কটির পাঠ্য সামগ্রীর সাথে লিঙ্কটি প্রতিস্থাপন করে।

আছে HTH


1

সবাইকে ধন্যবাদ...

আমার সমস্যাটি নীচের কোড দ্বারা সমাধান করা হয়েছে:

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

2
আপনি প্রোডাকশনে যাওয়ার আগে আমি এই লিঙ্কটিটি
কুমার

এই লিঙ্কটি কেবল তখনই কার্যকর যদি আপনি আই 6
ইয়েভেগেনি আফানসিয়েভ

0

Jquery এর জন্য এই প্লাগইনটি ইনস্টল করুন এবং এটি ব্যবহার করুন

http://plugins.jquery.com/project/jqueryenabledisable

এটি আপনাকে পৃষ্ঠার যে কোনও ক্ষেত্রকে অক্ষম / সক্ষম করতে দেয়।

আপনি যদি কোনও শর্তে একটি পৃষ্ঠা খুলতে চান তবে জাভা স্ক্রিপ্ট ফাংশন লিখুন এবং href থেকে কল করুন। যদি শর্তটি সন্তুষ্ট হয় তবে আপনি পৃষ্ঠাটি খুলুন অন্যথায় কেবল কিছুই করবেন না।

কোডটি এর মতো দেখাচ্ছে:

<a href="javascript: openPage()" >Click here</a>

and function:
function openPage()
{
if(some conditon)
opener.document.location = "http://www.google.com";
}
}

আপনি লিঙ্কটি একটি ডিভের মধ্যে রাখতে পারেন এবং স্টাইল বৈশিষ্ট্যের প্রদর্শন বৈশিষ্ট্যটি কারও কাছে সেট করতে পারেন। এটি ডিভটি গোপন করবে। যেমন।,

<div id="divid" style="display:none">
<a href="Hiding Link" />
</div>

এটি লিঙ্কটি আড়াল করবে। এই ফাংশনটিকে অনক্লিক হিসাবে কল করে এখনই এই ডিভিটি দৃশ্যমান করতে একটি বোতাম বা একটি চিত্র ব্যবহার করুন:

<a href="Visible Link" onclick="showDiv()">

and write the js code as:

function showDiv(){
document.getElememtById("divid").style.display="block";
}

আপনি এইচটিএমএল ট্যাগে একটি আইডি ট্যাগও রাখতে পারেন, তাই হবে

<a id="myATag" href="whatever"></a>

এবং আপনার জাভাস্ক্রিপ্ট ব্যবহার করে এই আইডি পান

document.getElementById("myATag").value="#"; 

এটির একটি অবশ্যই নিশ্চিত হাহার জন্য কাজ করবে


0

লিঙ্কটি অক্ষম করার জন্য আরেকটি পদ্ধতি

element.removeAttribute('href');

href ছাড়াই অ্যাঙ্কর ট্যাগ অক্ষম / সরল পাঠ্য হিসাবে প্রতিক্রিয়া জানায়

<a> w/o href </a>

পরিবর্তে <a href="#"> with href </a>

দেখুন jsFiddel

আশা করি এটি হেপলফুল।


0

শূন্যতার পরিবর্তে আপনি এটি ব্যবহার করতে পারেন:

<a href="javascript:;">this link is disabled</a> 

-2

0) আপনি আরও ভালভাবে মনে রাখতে পারেন যে আপনার কোনও লিঙ্ক এবং "#" href থাকলে কিছু ব্রাউজার "লাফ" দেয়। সুতরাং সর্বোত্তম উপায় হ'ল একটি কাস্টম জাভাস্ক্রিপ্ট

1) আপনি যদি কাস্টম জাভাস্ক্রিপ্টের পরে থাকেন তবে এটি এখানে:

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

"রিটার্ন মিথ্যা" লিঙ্কটি আসলে অনুসরণ করা থেকে বাধা দেয়।

2) আপনি নিম্নলিখিত ব্যবহার এড়ানো বিবেচনা করতে পারেন

<a href="javascript:void(0);" onclick="DoSomething();">Link</a>

অথবা

  <a href="javascript:;" onclick="DoSomething();">Link</a>

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

3) আপনার যদি ইতিমধ্যে jQueryএবং bootstrapআপনার প্রকল্পে থাকে তবে আপনি সেগুলি এর মতো ব্যবহার করে দেখতে পারেন:

$('.one-click').on("click", function (e) {
   $( this ).addClass('disabled');
});

যেখানে .disabledক্লাস আসছে ফর্ম বুটস্ট্র্যাপ।

বুটস্ট্র্যাপ ফর্মের সাইটটি ( এখানে )

লিঙ্ক কার্যকারিতা সতর্কতা

.D অক্ষমযুক্ত শ্রেণি pointer-events: noneএর লিঙ্ক কার্যকারিতা অক্ষম করার চেষ্টা করার জন্য ব্যবহার করে, তবে সিএসএসের সম্পত্তিটি এখনও মানসম্মত হয়নি। এছাড়াও, এমনকি ব্রাউজারগুলিতে যা পয়েন্টার-ইভেন্টগুলিকে সমর্থন করে: কোনওটি নয়, কীবোর্ড নেভিগেশন অকার্যকর থেকে যায়, অর্থাত্ দৃষ্টিভঙ্গি কীবোর্ড ব্যবহারকারী এবং সহায়ক প্রযুক্তি ব্যবহারকারীরা এখনও এই লিঙ্কগুলিকে সক্রিয় করতে সক্ষম হবেন। সুতরাং নিরাপদে থাকতে, tabindex="-1"এই লিঙ্কগুলিতে একটি বৈশিষ্ট্য যুক্ত করুন (কীবোর্ড ফোকাস পেতে তাদের রোধ করতে) এবং custom JavaScriptতাদের কার্যকারিতা অক্ষম করতে ব্যবহার করুন।

এবং custom JavaScriptবিভাগ 1 এ প্রদর্শিত হয়েছিল


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

উত্তরটির উন্নতি হয়েছে
ইয়েভেগেনি আফানাসেয়েভ

-4

অক্ষম লিঙ্কগুলির জন্য কোডের নীচে:

<a href="javascript: void(0)">test disabled link</a> 

আর একটি খুব সাধারণ সমাধান হ'ল:

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

প্রথম সমাধানটি দক্ষ।


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