JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="collapse navbar-collapse navHeaderCollapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a id="link" href="#">Link</a>
            </li>
        </ul>
        <!-- END: "nav navbar-nav navbar-right" -->
    </div>
    <!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div>
<!-- END: "container" -->
</div>
<!-- END: "navbar navbar-inverse navbar-fixed-top" -->

CSS

.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #ffffff;
  text-decoration: underline; 
}

JavaScript

$("#link").click(function() { 
    if($(this).css('text-decoration' == 'underline')) {
       alert("COME ON!");
    }
});