Home/ Questions/Q 7639539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:26:38+00:00

My tabs just plain aren’t working. If I move the active class in a

  • 0

My tabs just plain aren’t working. If I move the active class in a different area on the tab panes, the active one displays when the page loads, but when you click on a tab, nothing happens. My javascript is running, because less is working, so I don’t know what the problem could be.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Your Income Expert</title>
    <link rel="stylesheet/less" type="text/css" href="less/style.less">
    <script src="js/less.js" type="text/javascript"></script>
    <script src="js/bootstrap-tab.js" type="text/javascript"></script>
</head>

<body>
    <div class="container">
      <div class="row">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
                <li><h2>Your Logo Here</h2></li>
                 <li class="nav-header">Main</li>
                 <li class="active"><a href="#">Home</a></li>
                 <li><a href="#">Company</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Books</a></li>
                 <li><a href="#">Contact</a></li>
                 <li class="nav-header">Keep In Touch</li>
                 <li><a href="#">Facebook</a></li>
                 <li><a href="#">Twitter</a></li>
                 <li><a href="#">LinkedIn</a></li>
                 <li><a href="#">Blog</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
            <div class="well">
                <div id="motivator">
                    <img src="broker.png" alt="" />
                </div>

                <h2 id="motivator-subtext">Main Heading</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
                <p>Fusce a tincidunt purus. Pellentesque augue leo, varius pellentesque tempus sit amet, posuere at tortor. Aenean congue nibh sit amet quam tristique.</p>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium.</p>

                <ul class="nav nav-tabs">
                  <li><a href="#home">Service 1</a></li>
                  <li><a href="#profile">Service 2</a></li>
                  <li><a href="#messages">Service 3</a></li>
                  <li><a href="#settings">Service 4</a></li>
                </ul>

                <div class="tab-content">
                  <div class="tab-pane active" id="home">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet neque sit amet libero pulvinar vitae consequat ante adipiscing. Nam vehicula arcu in diam vehicula pretium. Nulla volutpat tellus ut tellus consectetur blandit egestas est ullamcorper. Morbi adipiscing suscipit quam eget eleifend. Nam est turpis, blandit sed vehicula ut, aliquet quis turpis. Nulla et ligula in.</p>
                  </div>
                  <div class="tab-pane" id="profile">
                    <p>Testing the profile tab.</p>
                  </div>
                  <div class="tab-pane" id="messages">
                    <p>Testing the messages tab</p>
                  </div>
                  <div class="tab-pane" id="settings">
                    <p>Testing the settings tab.</p>
                  </div>
                </div>
                <script>
                  $(function () {
                    $('.tabs a:first').tab('show')
                  })
                </script>

                <h3>Heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu pretium dolor. Ut a vulputate turpis. Donec dignissim mollis scelerisque. Maecenas pharetra, massa a varius mollis, magna odio suscipit sapien, et posuere tellus tellus non arcu.</p>
            </div>
        </div>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add to all a-tags (which should be tabs) the data-toggle attribute with the value tab, e.g.:

    <li><a data-toggle="tab" href="#home">Service 1</a></li>

    Also see this example; the 3rd tab is selected by setting the class active to the li.

    P.S.: your javascript ($(function () { $('.tabs a:first').tab('show') })) is not neccessary.

    === UPDATE ===

    For your example link in your command the document head should look like:

    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Your Income Expert</title>
    <link type="text/css" rel="stylesheet/less" href="less/style.less">
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <script type="text/javascript" src="js/less.js"></script>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
</head>
    • 0