Underlining link upon click using javascript

Question

Okay, so I'm totally new to everything website-related, and I'm trying to figure out how to make it so that when a link is clicked in my header navbar, the link will be underlined.

Here's my HTML, including the CSS for the active link.

Now, for the javascript - to make the link active - what file do I use (I'm using Bootstrap 3.2.0 btw)? Do I use bootstrap.js, or do I create my own - like I did for my CSS.

If you could walk me through it, that would be great. Thanks.

edit:

HTML:

 <div class="custom-wrapper"> 
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">

                <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="collapse navbar-collapse navHeaderCollapse">

                    <ul class="nav navbar-nav navbar-right">

                        <li><a href="#1">1</a></li>
                        <li><a href="#2">2</a></li>

                        <li class="dropdown">   
                            <a href="#3" class="dropdown-toggle" data-toggle="dropdown"><span>3</span><b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="#3.1">3.1</a></li>
                                <li><a href="#3.2">3.2</a></li>
                            </ul><!-- END: "dropdown-menu" -->      
                        </li><!-- END: "dropdown" -->
                        <li><a href="#4">4</a></li>

                    </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
                </div><!-- END: "container" -->
            </div><!-- END: "container" -->
        </div><!-- END: "navbar navbar-inverse navbar-fixed-top" --></div>

CSS:

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

Answer 1

You have quite a few questions here so I'm going to break it down into smaller parts.

1. "to make the link active - what file do I use (I'm using Bootstrap 3.2.0 btw)?" - you're going to want to make your own file. You usually don't want to modify original framework files, it's much cleaner and easier to create your own files. Make a file called script.js and just import it in your html sheet.

2. How to make links 'active' - I'd rather not just give you a bunch of code but what might be easiest to do is to have a class called 'active' that you style in css, for example:

   .active { color: red; text-decoration: underline; }

and using jQuery you can do something like

$(".nav > a").click(function() {        
    $(".nav > a").removeClass("active"); 
    $(this).addClass("active");          
})

to use jQuery you're going to import it in your head like any other js or css file:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

Used this SO question as reference.