CODEWITHSUNDEEP
javascripthtmlcss
i2ijeya
i2ijeya

Reputation: 16410

Hiding hyperlink button for already selected tab in WEB Application

In my web application, I have tabs and if any of the tab is clicked, the corresponding page will be displayed. But even after the tab is selected, the hyperlink button is enabled. My need is that if i do mouse over on the selected tab, the normal pointer should display instead of hyperlink. please help me suggesting the solution.

regards, Jeya

Upvotes: 0

Views: 105

Answers (4)

Pragmateek
Pragmateek

Reputation: 13374

Here is a complete sample :

<html>
    <head>
        <style type="text/css">
            a:target
            {
                cursor: default;
            }
        </style>
    </head>
    <body>
        <a id="anchor1" href="#anchor1">Anchor1</a>
        <a id="anchor2" href="#anchor2">Anchor2</a>
        <a id="anchor3" href="#anchor3">Anchor3</a>
    </body>
</html>

When you click any of the link it'll become the current target of the page, then the a:target rule will be applied to it, setting the default cursor.

EDIT for IE :

Changing my original sample, here is another implementation using jQuery, tested with IE8 but not IE7.

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            $(function()
            {
                var hash = null;

                var updateAnchors = function()
                {
                    hash = window.location.hash;

                    $(".tab").removeClass("target");

                    $(".tab[href=" + hash + "]").addClass("target");
                };

                window.setInterval(function ()
                {
                    if (window.location.hash != hash)
                    {
                        updateAnchors();
                    }
                }, 100);

                updateAnchors();
            });
        </script>
        <style type="text/css">
            .target
            {
                cursor: default;
            }
        </style>
    </head>
    <body>
        <a id="anchor1" href="#anchor1" class="tab">Anchor1</a>
        <a id="anchor2" href="#anchor2" class="tab">Anchor2</a>
        <a id="anchor3" href="#anchor3" class="tab">Anchor3</a>
    </body>
</html>

Upvotes: 1

ijse
ijse

Reputation: 3035

Use JavaScript:

document.getElementById("myATagId").style.cursor = "default";

Upvotes: 0

Tim S.
Tim S.

Reputation: 13843

You can select an element using javascript:

document.getElementById('element-id');

Once you've done that, you can modify the style within that element:

document.getElementById('your-element').style.cursor = 'default';

Now your cursor should look normal.

Upvotes: 0

Graham
Graham

Reputation: 6562

Either

<a>you can't click me</a>

or 

<a href='...' style='cursor:default'>you can click me but the cusror doesn't indicate this</a>

Upvotes: 1

Related Questions