Bootstrap 3, Dropdown in Nav Bar not targeting href on click on Internet Explorer

Question

I am having a weird issue with a bootstrap dropdown with a Nav-Bar. Items on the Nav-Bar Target Tabs on the page. I have multiple Nav bar items and then one dropdown Nav item with 3 items within it. On Chrome and Firefox it works perfectly, however on IE, on the dropdown Nav Items it does not target the tab and display the tab.

Any idea what could be causing this?

Here is my code:

<ul id="tabshome" class="nav nav-pills nav-justified">

    <li id="tab1" class="active taboutline"><a data-toggle="pill"   href="#tabDiv1">Tab1</a></li>
    <li id="tab2" class="taboutline"><a data-toggle="pill" href="#tabDiv2">Tab2</a></li>
         <li class="dropdown taboutline">
        <a class="dropdown-toggle" data-toggle="dropdown">
            Drop Down Tab
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li id="dropdowntab1"><a href="#dropdownTabDiv1">DropDown Tab 4</a></li>
            <li id="dropdowntab2"><a href="#dropdownTabDiv2">DropDown Tab 5</a></li>            
        </ul>
    </li>
</ul>
<div class="tab-content">
    <div id="tabDiv1" class="tab-pane fade blocks in active ">
        <div class="row">
        Tab 1
        </div>
    </div>
    <div id="tabDiv2" class="tab-pane fade blocks">
        <div class="row">
        Tab 2
        </div>
    </div>
    <div id="dropdownTabDiv1" class="tab-pane fade blocks">
        <div class="row">
        Tab 3
        </div>
    </div>
    <div id="dropdownTabDiv2" class="tab-pane fade blocks">
        <div class="row">
        Tab 4
        </div>
    </div>
</div>

I am using Jquery, and I have made sure that the jquery reference is above the bootstap.min.js reference.

Answer 1

我认为这是因为缺少li id dropdowntab2结尾引号。