Want to make inactive hyperlink

Question

I have problem in hide and show the div element. In this scenario when user click on the year the respect content is shown. Problem I want to inactive hyperlinking on respective year when it is opened. The script and html is below; for this I have tried .preventDefault(). but not got any success:

<script type="text/javascript" >
      $(document).ready(function() {
         $("div.new:gt(0)").hide();// to hide all div except for the first one
         $("div[name=arrow]:eq(0)").hide();
         // $("div.nhide:gt(0)").hide(); 
          // $("a[name=new]").hide();
         $("a[name=new]").hide();
         $('#content a').click(function(selected) {

            var getID = $(this).attr("id"); 
            var value=  $(this).html(); 
           
            if( value == '&lt;&lt; Hide')
            {
                // $("#" + getID + "arrow").hide();
                $("a[name=new]").hide();
                $("#" + getID + "_info" ).slideUp('slow');
                $("div[name=arrow]").show();
                $("div.new").hide(); 
                $(this).hide();
                // var getOldId=getID;
                // $("#" + getID ).html('&lt;&lt; Hide').hide(); 
            }
            if($("a[name=show]"))  
            {
                // $("div.new:eq(0)").slideUp()
                $("div.new").hide(); 
                $("div[name=arrow]").show();
                $("a[name=new]").hide();
                $("#news" + getID + "arrow").hide();
                $("#news" + getID + "_info" ).slideDown();
                
                $("#news" + getID ).html('&lt;&lt; Hide').slideDown(); 
            } 
            
        });  
    });  
</script>

The html code is below:

<div id="content">
<div class="news_year">
 <a href="#" name="show"  id="2012">
   <div style="float:left;" name="year" id="news2012year">**2012** </div>
   <div style="float:left;" name="arrow" id="news2012arrow">&gt;&gt;</div>
 </a>
    </div> 
        
 <div class="new" id="news2012_info">
   <div class="news">
      <div class="news_left">News for 2012</div>
   </div>
    <div class="nhide" ><a href="#" class="new" name="new" id="news2012">&lt;&lt; Hide</a>  </div>
  </div>
<div id="content">
<div class="news_year">
 <a href="#" name="show"  id="2011">
   <div style="float:left;" name="year" id="news2012year">2012 </div>
   <div style="float:left;" name="arrow" id="news2012arrow">&gt;&gt;</div>
 </a>
    </div> 
        
 <div class="new" id="news2011_info">
   <div class="news">
      <div class="news_left">News for 2011</div>
   </div>
    <div class="nhide" ><a href="#" class="new" name="new" id="news2011">&lt;&lt; Hide</a>  </div>
  </div>

Fiddle

score 0 · Answer 1 · answered Mar 26 '13 at 06:21

if i am understanding your problem, event.preventDefault(); not works with all browser so if you are using other browser like IE then use event.returnValue = false; instead of that.so you can detect your browser using javascript as

var appname = window.navigator.appName;

score 0 · Answer 2 · edited May 23 '17 at 12:11

This is what I'm currently using in my projects to "disable" an anchor tag

Disabling the anchor:

Remove href attribute
Change the opacity for added effect

<script>
$(document).ready(function(){
            $("a").click(function () { 
                $(this).fadeTo("fast", .5).removeAttr("href"); 
            });
        });
</script>

Enabling the anchor:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Original code can be found here

tomb · Answer 3 · 2013-03-26T06:28:19.977

Surround the code inside of the click function with an if statement checking to see if a variable is true or false. If it is false, it won't run the code, meaning the link is effectively inactive. Try this..

var isActive = true;
if (isActive) {
    // Your code here
}
// The place where you want to de-activate the link
isActive = false;

You could also consider changing the link colour to a grey to signify that it is inactive.

Edit
Just realised that you want to have multiple links being disabled.. the code above will disable all of them. Try the code below (put the if around the code in the click function)

if(!$(this).hasClass("disabled")) {
    // Your code here
}

// The place where you want to de-activate the link
$("#linkid").addClass("disabled");

// To re-enable a link
$("#linkid").removeClass("disabled");

// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");

Then in your CSS you could have a declaration like this:

.disabled:link {
    color:#999;
}

score 0 · Answer 4 · answered Mar 26 '13 at 06:24

0

Add a class called 'shown' to your wrapper element when expanding your element and remove it when hiding it. Use .hasClass('shown') to ensure the inappropriate conditional is never executed.

answered Mar 26 '13 at 06:24

pdoherty926

9,895
4
37
68

Want to make inactive hyperlink

4 Answers4