Tabs not becoming active (.ejs)

It seems like a really stupid question but cannot seem to get it to work. This is my code:

<ul id="navTabs" class="nav nav-tabs" >
    <li class="active"><a data-toggle="tab" href=".." role="tab">Dashboard</a></li>
    <li><a data-toggle="tab" href="software" role="tab">Software Components</a></li>
    <li><a data-toggle="tab" href="#" role="tab">Product Configurations</a></li>
</ul>

I have been following the documentation on Bootstrap to achieve what I want. So the tab that is active is supposed to have the background colour of white and the previous active is supposed to lose it’s colour. For example, if I click on the tab with text Software Components, this does not happen and the tab with text Dashboard stays with the background colour white.

After inspecting the element as to what was happening, when I click on the Software Components tab, for example, it does not become the active one and the original stays active.

Here’s a screenshot:

enter image description here

As you can see from my URL, that I have tried to access the Software page but the Dashboard tab stays active.

I have imported the Bootstrap plugins as required:

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Is this something to do with the fact it’s in an EJS file and not a HTML? I’m not sure but I’ve run out of idea as to what it could be.

Note: This is pure HTML, there is no JS or JQuery written for the tabs.


Source: html

Leave a Reply