Bootstrap Tabs Not Working throwing tab undefined error

Question

I am using the below code to render the bootstrap tab in my MVC application. All the scripts are loaded correctly. but still throwing tab undefined error.

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/bootstrap-tabs.js")" type="text/javascript"></script>

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        jhgh
    </div>
    <div class="tab-pane fade" id="profile">
        mbjb
    </div>

</div>


<script type="text/javascript">
    $(function () {

        $('#myTab a').click(function (e) {debugger
            e.preventDefault()
            $(this).tab('show');
        });
    });

</script>

Thanks,

Siva

1) try without the debugger; 2) Use these markup - getbootstrap.com/javascript/#tabs 3) check for jQuery conflicts — NoSense
– NoSense, Commented Dec 31, 2013 at 13:26
I'm not very sure, I haven't ever use bootstrap, but find this in the docs - 'You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab"'...so try first without your js :) — NoSense
– NoSense, Commented Dec 31, 2013 at 13:37

Merlin · Accepted Answer · 2013-12-31 13:45:23Z

1

Try to remove "debbuger" WORKING FIDDLE

HTML

<ul id="myTab" class="nav nav-tabs">
  <li class="active">
      <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li>
      <a href="#profile" data-toggle="tab">Profile</a>
  </li>
</ul>
<div id="myTabContent" class="tab-content">
  <div class="tab-pane fade in active" id="home">
      jhgh
  </div>
  <div class="tab-pane fade" id="profile">
      mbjb
  </div>
</div>

JAVASCRIPT

   $(function () {
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show');
        });
    });

answered Dec 31, 2013 at 13:45

Merlin

4,9252 gold badges35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sebastián Olate Bustamante · Accepted Answer · 2013-12-31 13:46:46Z

0

You should import the complete bootstrap's javascript library, It seems like exists a javascript dependence on bootstraps's files js

answered Dec 31, 2013 at 13:46

Sebastián Olate Bustamante

1244 bronze badges

Collectives™ on Stack Overflow

Bootstrap Tabs Not Working throwing tab undefined error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related