c# .net Adsense ADO.NET Linq Viruses/security asp.net MVC JQuery Angular-js Node-js SEO Java C++ SQL API Networking vb.net .Net Css JavaScript Generics c#.Net entity framework HTML Website host Website Construction Guide HTTP tutorial W3C tutorial Web Services JSON Psychology Ionic framework Angular ReactJS Python Computer Android
JQuery

How to get href value property for anchor tag in jquery?

| | Html , JQuery

In this article we will learn how to get href value property for anchor tag in jquery using attr() property. Below example when the user clicks the about link button alert will show the href property value.

Example:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>get href propertyvalue in anchor tag using jquery</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
            $("#mnuAbout").click(function (event) {
                var href = $(this).attr('href');
               alert(href);
               event.preventDefault();
            });
        });
    </script>
    <style type="text/css">
        a {
            color: #00BCD4;
            padding: 10px;
        }
            a:hover {
                color: #FF9800;
            }
    </style>
</head>
<body style="font-family: Arial; border: 1px solid #DED8D8; width: 500px;">
    <h2 style="color: #E91E63;">get href property value in anchortag using jquery</h2>
    <div style="text-align: center">
        <p><a class="menuButton" id="mnuHome" href="http://www.infinetsoft.com">Home</a></p>
        <p><a class="menuButton" id="mnuAbout" href="http://www.infinetsoft.com/about">About</a></p>
        <p><a class="menuButton" id="mnuContact" href="http://www.infinetsoft.com/contact">Contact Us</a></p>
        <p style="color: #071D98;">
            click on about link to get href propertyvalue
        </p>
    </div>
</body>
</html>

Output:

 get href property value in anchor tag using jquery