Show an Anchor tag in an ASP.Net page with JQuery

Question

I've got an ASP.Net page in which I have an html anchor tag and I've set the visible property to false. I want to make it visible with JQuery, but can't seem to get it to work. I've tried to use the selector for the anchor tag itself, and also a class selector, but neither has any effect. Here is the markup for the anchor tag:

<a runat="server" class="reg" visible="false" id="RegisterSoftwareTab" href="../RegisterSoftware.aspx">Register Software</a>

And here is the JQuery code:

<script type="text/javascript" >
    $(document).ready(function() {
        $('a').attr("visible", "true");
        $('a').show();
        $('.reg').attr("visible", "true");
        $('.reg').show();
    });
</script>

Answer 1

visible is not a correct attribute to use; it isn't defined by the HTML standard. You can use the Visible attribute only on an ASP.NET control like the asp:Button; Visible="false" will then be rendered to a style="display:none", which is HTML compliant.

If you want to hide your element using a normal HTML tag, try to use the display CSS property directly within the HTML tag:

<a runat="server" class="reg" style="display:none;"  id="RegisterSoftwareTab" href="../RegisterSoftware.aspx">Register Software</a>

What the show() method does is to switch the element's style to display:inline;, so in this case you shall call only $('.reg').show() or $('a').show(), without having to change the display CSS property directly using the attr() method:

<script type="text/javascript" >
    $(document).ready(function() {
        $('a').show();
    });
</script>

Answer 2

Set the style to none for the anchor tag:

<a runat="server" class="reg" style="display: none;" id="RegisterSoftwareTab" href="../RegisterSoftware.aspx">Register Software</a>

Then to show it, use $('a').show();