HTML लिंक को कैसे निष्क्रिय करें

Question

मेरे पास एक लिंक बटन है <td>जिसके अंदर मुझे अक्षम करना है। यह IE पर काम करता है लेकिन फ़ायरफ़ॉक्स और क्रोम में काम नहीं करता है। संरचना है - एक के अंदर लिंक <td>। मैं किसी भी कंटेनर को नहीं जोड़ सकता <td>(जैसे div / span)

मैंने निम्नलिखित सभी की कोशिश की लेकिन फ़ायरफ़ॉक्स पर काम नहीं कर रहा (1.4.2 js का उपयोग करके):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

नोट - मैं एंकर टैग के लिए क्लिक फ़ंक्शन को डी-रजिस्टर नहीं कर सकता क्योंकि यह गतिशील रूप से पंजीकृत है। और मुझे विस्थापित मोड में लिंक दिखाना है।

Comments

CSS केवल प्रश्न: stackoverflow.com/questions/2091168/disable-a-link-use-css

— सिरो संतिली 郝海东 over over

Answer 1

आप लिंक को अक्षम नहीं कर सकते (पोर्टेबल तरीके से)। आप इन तकनीकों में से किसी एक का उपयोग कर सकते हैं (प्रत्येक अपने स्वयं के लाभ और नुकसान के साथ)।

सीएसएस तरीका

यह सही तरीका होना चाहिए (लेकिन बाद में देखें) ऐसा करने के लिए जब अधिकांश ब्राउज़र इसका समर्थन करेंगे:

a.disabled {
    pointer-events: none;
}

यह क्या है, उदाहरण के लिए, बूटस्ट्रैप 3.x करता है। वर्तमान में (2016) यह केवल क्रोम, फायरफॉक्स और ओपेरा (19+) द्वारा अच्छी तरह से समर्थित है। इंटरनेट एक्सप्लोरर ने संस्करण 11 से इसका समर्थन करना शुरू कर दिया, लेकिन लिंक के लिए नहीं, हालांकि यह बाहरी तत्व में उपलब्ध है जैसे:

span.disable-links {
    pointer-events: none;
}

साथ में:

<span class="disable-links"><a href="#">...</a></span>

वैकल्पिक हल

हमें, शायद, के लिए एक सीएसएस वर्ग को परिभाषित करने की आवश्यकता है pointer-events: noneलेकिन क्या होगा अगर हम सीएसएस वर्ग के बजाय विशेषता का पुन: उपयोग करते हैं disabled? कड़ाई से बोलने के disabledलिए समर्थित नहीं है, <a>लेकिन ब्राउज़र अज्ञात विशेषताओं के लिए शिकायत नहीं करेंगे । disabledविशेषता IE का उपयोग करना अनदेखा करेगा, pointer-eventsलेकिन यह IE विशिष्ट disabledविशेषता का सम्मान करेगा ; अन्य CSS अनुरूप ब्राउज़र अज्ञात disabled विशेषता और सम्मान को अनदेखा करेंगे pointer-events। समझाने की तुलना में लिखने में आसान:

a[disabled] {
    pointer-events: none;
}

IE 11 के लिए एक अन्य विकल्प displayलिंक तत्वों के समूह को blockया inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

ध्यान दें कि यह एक पोर्टेबल समाधान हो सकता है यदि आपको IE का समर्थन करने की आवश्यकता है (और आप अपना HTML बदल सकते हैं) लेकिन ...

यह सब कहा कृपया ध्यान दें कि pointer-eventsकेवल ... सूचक घटनाओं को निष्क्रिय करता है। लिंक अभी भी कीबोर्ड के माध्यम से नेविगेट करने योग्य होंगे फिर आपको यहां वर्णित अन्य तकनीकों में से एक को लागू करने की भी आवश्यकता है।

फोकस

ऊपर वर्णित सीएसएस तकनीक के साथ संयोजन में आप tabindexएक गैर-मानक तरीके से ध्यान केंद्रित करने के लिए एक तत्व को रोकने के लिए उपयोग कर सकते हैं :

<a href="#" disabled tabindex="-1">...</a>

मैंने कभी भी कई ब्राउज़रों के साथ इसकी संगतता की जाँच नहीं की है, तो आप इसे उपयोग करने से पहले अपने आप से परीक्षण करना चाह सकते हैं। यह जावास्क्रिप्ट के बिना काम करने के लिए लाभ है। दुर्भाग्य से (लेकिन जाहिर है) tabindexसीएसएस से नहीं बदला जा सकता है।

अवरोधन क्लिक

hrefजावास्क्रिप्ट फ़ंक्शन का उपयोग करें , स्थिति की जांच करें (या स्वयं अक्षम विशेषता) और मामले में कुछ भी न करें।

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

लिंक को अक्षम करने के लिए ऐसा करें:

$("td > a").attr("disabled", "disabled");

उन्हें फिर से सक्षम करने के लिए:

$("td > a").removeAttr("disabled");

यदि आप इसके बजाय चाहते हैं तो आप .is("[disabled]")उपयोग कर सकते हैं .attr("disabled") != undefined(jQuery 1.6+ हमेशा वापस आ जाएगा undefinedजब विशेषता सेट नहीं होती है) लेकिन is()बहुत अधिक स्पष्ट है (इस टिप के लिए डेव स्टीवर्ट के लिए धन्यवाद)। यहाँ ध्यान दें मैं उपयोग कर रहा हूँ कृपया disabledएक गैर मानक रास्ते में विशेषता, अगर आप इस बारे में परवाह है तो एक वर्ग के साथ विशेषता की जगह और की जगह .is("[disabled]")के साथ .hasClass("disabled")(जोड़ने और साथ दूर करने addClass()और removeClass())।

Zoltán Tamási ने एक टिप्पणी में कहा कि "कुछ मामलों में क्लिक इवेंट पहले से ही कुछ" वास्तविक "फ़ंक्शन (उदाहरण के लिए नॉकआउट) का उपयोग करने के लिए बाध्य है, उस स्थिति में ईवेंट हैंडलर ऑर्डरिंग कुछ परेशानियों का कारण बन सकता है। इसलिए मैंने वापसी के लिए बाध्य लिंक के साथ अक्षम लिंक लागू किए। लिंक के लिए झूठी हैंडलर touchstart, mousedownऔर keydownघटनाओं। यह कुछ कमियां हैं (यह स्पर्श लिंक पर शुरू कर दिया स्क्रॉल कर पाएगा) " लेकिन कुंजीपटल की घटनाओं से निपटने के भी लाभ कीबोर्ड नेविगेशन को रोकने के लिए है।

ध्यान दें कि यदि hrefसाफ़ नहीं किया गया है तो उपयोगकर्ता के लिए उस पृष्ठ को मैन्युअल रूप से देखना संभव है।

लिंक साफ़ करें

hrefविशेषता साफ़ करें । इस कोड के साथ आप एक ईवेंट हैंडलर नहीं जोड़ते हैं लेकिन आप लिंक को ही बदल देते हैं। लिंक को अक्षम करने के लिए इस कोड का उपयोग करें:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

और यह एक उन्हें फिर से सक्षम करने के लिए:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

व्यक्तिगत रूप से मुझे यह समाधान बहुत पसंद नहीं है (यदि आपको अक्षम लिंक के साथ अधिक नहीं करना है) लेकिन लिंक का पालन करने के विभिन्न तरीकों के कारण यह अधिक संगत हो सकता है।

नकली क्लिक हैंडलर

एक onclickफ़ंक्शन जोड़ें / निकालें जहां आप return false, लिंक का पालन नहीं किया जाएगा। लिंक अक्षम करने के लिए:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

उन्हें फिर से सक्षम करने के लिए:

$("td > a").removeAttr("disabled").off("click");

मुझे नहीं लगता कि पहले वाले के बजाय इस समाधान को पसंद करने का एक कारण है।

स्टाइलिंग

स्टाइलिंग और भी सरल है, जो भी समाधान आप लिंक को निष्क्रिय करने के लिए उपयोग कर रहे हैं वह हमने एक disabledविशेषता जोड़ दिया है ताकि आप CSS नियम का उपयोग कर सकें:

a[disabled] {
    color: gray;
}

यदि आप विशेषता के बजाय कक्षा का उपयोग कर रहे हैं:

a.disabled {
    color: gray;
}

यदि आप UI फ्रेमवर्क का उपयोग कर रहे हैं, तो आप देख सकते हैं कि अक्षम लिंक ठीक से स्टाइल नहीं किए गए हैं। उदाहरण के लिए, बूटस्ट्रैप 3.x, इस परिदृश्य को संभालता है और बटन को disabledविशेषता के साथ और .disabledवर्ग के साथ सही ढंग से स्टाइल किया गया है । यदि, इसके बजाय, आप लिंक को साफ़ कर रहे हैं (या किसी अन्य जावास्क्रिप्ट तकनीक का उपयोग कर रहे हैं) तो आपको स्टाइल को भी संभालना होगा क्योंकि इसके <a>बिना hrefअभी भी पेंट नहीं किया गया है।

सुलभ रिच इंटरनेट एप्लिकेशन (ARIA)

विशेषता / वर्ग के aria-disabled="true"साथ एक विशेषता को भी शामिल करना न भूलें disabled।

Comments

सही। लेकिन आसान रखरखाव के लिए मैं सभी के लिए क्लिक करें घटना संचालकों जोड़ना होगा td aकि विकलांग हो सकता है, जो फोन करेगा event.preventDefault(), तो $(this).data('disabled')सच है, और फिर सेट data('disabled', true)किसी भी लिंक को निष्क्रिय करने के लिए मैं चाहता हूँ करने के लिए (सक्षम करने के लिए झूठी, आदि)

— ori

@Ankit उपस्थिति के लिए आपके पास सीएसएस है! इस तरह से 'अक्षम' लिंक के लिए एक नियम सेट अप करें [विकलांग] {color: grey}

— एड्रियानो रेपेती

ब्राउज़र-समर्थन पर त्वरित अपडेट । नोट भले ही IE11 पॉइंटर-इवेंट्स का समर्थन करता है, एक छोटा सा tidbit है जो कहता है कि यह लिंक पर काम नहीं करता है: (...

— अगस्त

$(this).is('[disabled]')विकलांग विशेषता का पता लगाने का एक अच्छा तरीका हो सकता है

— डेव स्टीवर्ट

जॉन, मुझे यह पसंद नहीं है। सबसे पहले क्योंकि कीबोर्ड नेविगेशन अभी भी काम करता है। दूसरा क्योंकि यह एक चाल है (यह केवल तभी उपयोगी हो सकता है जब कुछ और काम न करे)। तीसरा, क्योंकि कुछ लोग जावास्क्रिप्ट को अक्षम रखते हैं और इस मामले में आपके पास सुरक्षा का कोई "स्तर" नहीं है। चौथा क्योंकि यह यहां सबसे जटिल समाधान है (जब कुछ जावास्क्रिप्ट लाइनें काम कर सकती हैं)

— एड्रियानो रेपेती

Answer 2

सीएसएस में तय किया।

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

लंगर टैग पर लागू होने पर ऊपर सीएसएस क्लिक घटना को निष्क्रिय कर देगा।

विवरण के लिए इस लिंक को देखें

Comments

यह एक अच्छा समाधान है, लेकिन यह समर्थित नहीं है ... लगता है ... इंटरनेट एक्सप्लोरर।

— एड्रियानो रेपेट्टी

इसके सभी ब्राउज़रों द्वारा समर्थित

— अंकित

यह Internet Explorer और ओपेरा में HTML के लिए समर्थित नहीं होना चाहिए।

— एड्रियानो रेपेती

@Ankit, यह IE 9 और नीचे में काम नहीं करता है। क्या आप IE 10 का उपयोग कर रहे हैं?

— मनदीप जैन

यह कीबोर्ड घटनाओं का उपयोग करता है, ऊपर एड्रियानो रेपेती उल्लेख के रूप में मामले का उपयोग करता है। उपयोगकर्ता अभी भी लिंक पर टैब कर सकता है और एंटर दबा सकता है।

— पिंजरे के रटलर

Answer 3

उन सभी के लिए धन्यवाद जो समाधान पोस्ट करते हैं (विशेषकर @ AdrianoRepetti), मैंने कुछ और उन्नत disabledकार्यक्षमता प्रदान करने के लिए कई तरीकों को संयुक्त किया (और यह क्रॉस ब्राउज़र काम करता है)। कोड नीचे है (आपकी प्राथमिकता के आधार पर ES2015 और कॉफ़ीस्क्रिप्ट दोनों)।

यह रक्षा के कई स्तरों के लिए प्रदान करता है ताकि एंकर को अक्षम के रूप में चिह्नित किया जाए जो वास्तव में ऐसा व्यवहार करता है। इस दृष्टिकोण का उपयोग करते हुए, आपको एक एंकर मिलता है जिसे आप नहीं कर सकते हैं:

• क्लिक
• टैब और हिट पर लौटें
• इसे टैब करने से ध्यान केंद्रित अगले तत्व पर चला जाएगा
• यदि एंकर बाद में सक्षम है तो यह ज्ञात है

---

कैसे

1. इस सीएसएस को शामिल करें, क्योंकि यह रक्षा की पहली पंक्ति है। यह आपके द्वारा उपयोग किए जाने वाले चयनकर्ता को मानता हैa.disabled

   a.disabled {
     pointer-events: none;
     cursor: default;
   }

2. इसके बाद, तैयार (वैकल्पिक चयनकर्ता के साथ) इस वर्ग को तुरंत लिखें:

     new AnchorDisabler()

---

ES2015 कक्षा

npm install -S key.js

import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

---

Coffescript वर्ग:

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

Comments

लेकिन क्या होगा अगर हमें एक सीधे jQuery / जावास्क्रिप्ट समाधान की आवश्यकता है? नीचे मेरा जवाब देखें।

— जॉन क्रॉफर्ड

ठीक है, तो आप ES2015 वर्ग का उपयोग करें जिसे मैंने अभी जोड़ा है!

— क्रॉस

Answer 4

तत्व का प्रयास करें:

$(td).find('a').attr('disabled', 'disabled');

Chrome में मेरे लिए लिंक अक्षम करना काम करता है: http://jsfiddle.net/KeesCBakker/LGYpz/ ।

फ़ायरफ़ॉक्स अच्छा नहीं लगता है। यह उदाहरण काम करता है:

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

नोट: भविष्य में अक्षम / सक्षम लिंक के लिए एक 'लाइव' स्टेटमेंट जोड़ा गया है।
नोट 2: 'लाइव' को 'ऑन' में बदल दिया।

Comments

नया उदाहरण फ़ायरफ़ॉक्स में भी काम करना चाहिए। ;-) यह एक फ़ायरफ़ॉक्स है: D

— Kees C. बकर

Chrome ने jsField में नेविगेशन को "एक्स-फ्रेम-ऑप्शंस द्वारा निषिद्ध प्रदर्शन के कारण दस्तावेज़ प्रदर्शित करने से मना" करने के कारण रोकता है। क्षमा करें यदि jsfiddle उदाहरण अजीब चीजें करता है ;-)

— Kees C. Bakker

मुझे एंकर टैग को अक्षम के रूप में भी दिखाना होगा। जैसा IE में दिखाया गया है। इसके अलावा, अगर मैं अक्षम है तो चेक को रखने के लिए क्लिक फ़ंक्शन को संशोधित नहीं करना चाहता

— अंकित

शो-भाग को सीएसएस द्वारा किया जा सकता है और एक वर्ग जोड़कर जो इसे धूसर कर देता है। 'लाइव' क्लिक का लाभ यह है कि आप सभी लिंक की समस्या को ठीक कर देंगे। अगर मैं और अधिक मदद कर सकता हूं, तो मुझे बताएं। आशा है आप सफल होंगे।

— कीस सी। बक्कर

पूरी तरह से पार ब्राउज़र समाधान के लिए नीचे मेरे जवाब की कोशिश करो!

— जॉन क्रॉफर्ड

Answer 5

बूटस्ट्रैप 4.1 एक वर्ग प्रदान करता है जिसका नाम disabledऔर aria-disabled="true"विशेषता है।

उदाहरण"

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

अधिक getbootstrap.com पर है

इसलिए यदि आप इसे गतिशील रूप से बनाना चाहते हैं, और you don't want to care if it is button or ancorजेएस स्क्रिप्ट की तुलना में आपको ऐसा कुछ चाहिए

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

लेकिन सावधानी बरतें

समाधान केवल कक्षाओं के साथ लिंक पर काम करता है btn btn-link।

कभी-कभी बूटस्ट्रैप card-linkकक्षा का उपयोग करने की सलाह देता है , इस मामले में समाधान काम नहीं करेगा ।

Answer 6

मैंने नीचे दिए गए समाधान के साथ समाप्त किया है, जो या तो एक विशेषता <a href="..." disabled="disabled">या एक वर्ग के साथ काम कर सकता है <a href="..." class="disabled">:

सीएसएस शैलियाँ:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

जावास्क्रिप्ट (jQuery के तैयार में):

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

Answer 7

आप एक लिंक अक्षम नहीं कर सकता है, तो आपको लगता है कि क्लिक करें घटना तो बस आग नहीं करना चाहिए चाहते हैं उस लिंक से।Removeaction

$(td).find('a').attr('href', '');

अधिक जानकारी के लिए: - वे तत्व जिन्हें अक्षम किया जा सकता है

Comments

यह वास्तव में लिंक को अक्षम नहीं करता है। लंगर तत्व अभी भी ट्रिगर होगा, भले ही यह एक ही पृष्ठ पर रहेगा।

— फ्लोरियन मार्गाइन

Answer 8

मैं कुछ ऐसा करूंगा

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

कुछ इस तरह काम करना चाहिए। आप उन लिंक के लिए एक वर्ग जोड़ते हैं जिन्हें आप अक्षम करना चाहते हैं और जब कोई उन्हें क्लिक करता है तो आप झूठे हो जाते हैं। उन्हें सक्षम करने के लिए सिर्फ कक्षा निकालें।

Comments

यह मदद नहीं करेगा। मुझे क्लिक इवेंट को फिर से पंजीकृत करना होगा और फ़ंक्शन को गतिशील कहा जाता है। एक बार हटा दिए जाने के बाद, मैं इसे वापस नहीं ले सकता

— अंकित

Answer 9

टच डिवाइस पर किसी अन्य पेज तक पहुंचने के लिए लिंक को अक्षम करने के लिए:

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Comments

मेरा जवाब मोबाइल पर भी काम करता है। बहुत क्रॉस ब्राउज़र। निचे देखो।

— जॉन क्रॉफोर्ड

यह गलत है, अगर आप setAttribute('href', '');और पृष्ठ यूआरएल http://example.com/page/?query=somethingलिंक है जब IE11 पर क्लिक किया जाएगा http://example.com/page/। वर्कअराउंड का उपयोग किया जा सकता हैsetAttribute('href', '#');

— मार्को डेमायो

Answer 10

रेज़र (.cshtml) में आप कर सकते हैं:

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

Answer 11

आप HTML में asp.net या लिंक बटन के हाइपरलिंक को अक्षम करने के लिए इसका उपयोग कर सकते हैं।

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Answer 12

एक और संभव तरीका है, और एक जो मुझे सबसे अच्छा लगता है। मूल रूप से यह उसी तरह है जैसे लाइटबॉक्स एक पूरे पृष्ठ को निष्क्रिय कर देता है, जेड-इंडेक्स के साथ एक div और fiddling रखकर। यहाँ मेरा एक परियोजना से प्रासंगिक स्निपेट है। यह सभी ब्राउज़रों में काम करता है !!!!!

जावास्क्रिप्ट (jQuery):

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

और html में

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

तो पुनर्विक्रेता को एंकर की (छवियां केवल तीर हैं) स्थानों को ढूंढती है और शीर्ष पर डिस्ब्लर को रखती है। डिस्बैलर की छवि एक पारदर्शी ग्रे स्क्वायर है (HTML में डिस्ब्लर्स की चौड़ाई / ऊँचाई को अपने लिंक से मिलान करने के लिए बदलें) यह दिखाने के लिए कि यह अक्षम है। फ़्लोटिंग पृष्ठ को गतिशील रूप से आकार देने की अनुमति देता है, और disablers windowResizer () में सूट का पालन करेंगे। आप Google के माध्यम से उपयुक्त चित्र पा सकते हैं। मैंने सादगी के लिए प्रासंगिक सीएसएस इनलाइन को रखा है।

फिर कुछ शर्त पर आधारित,

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

Comments

नीचा नहीं किया, लेकिन मेरा अनुमान है: एक साधारण बात के लिए बहुत अधिक उपरि, तो आपके कोड ने SO पर एक उत्तर के लिए पर्याप्त टिप्पणी नहीं की है। यह भी बहुत हैकिंग लग रहा है, मैं व्यक्तिगत रूप से इसका उपयोग नहीं करूंगा।

— एमिल बर्जरॉन

Answer 13

मुझे लगता है कि इनमें से बहुत सारी सोच खत्म हो गई है। आप जो चाहें, उसकी एक क्लास जोड़ें disabled_link।
फिर सीएसएस बनाएं .disabled_link { display: none }
बूम है अब उपयोगकर्ता लिंक नहीं देख सकता है इसलिए आपको इसे क्लिक करने के बारे में चिंता करने की आवश्यकता नहीं होगी। यदि वे क्लिक करने योग्य लिंक को संतुष्ट करने के लिए कुछ करते हैं, तो बस कक्षा को jQuery से हटा दें
$("a.disabled_link").removeClass("super_disabled"):। बूम किया!

Comments

इस सवाल से: 'और मुझे डिसाइड मोड में लिंक दिखाना है।'

— मार्सेलो

हाँ, आप सही हैं। मैंने यह खो दिया। इसलिए मैं इसके बजाय कहूंगा, डेटा को href करने के लिए href मान को स्थानांतरित करें, $("td a").each(function(i,v){ $(this).data('href',this.href); $(this).attr('href','#').css('color','grey'); });फिर जब आप एक को अनडिस्सेबल करना चाहते हैं: $(this).attr('href',$(this).data('href')).css('color','blue');

— जॉर्डन माइकल रशिंग