jQuery UI open tab on page load

JavaScript
1

In older versions of jQuery UI I was able to add a “#C” at the end of a URL to load the page on a certain tab (Tab C), however I am having problems with this version I am using.

Here is the page:

Here is the script I am using to call the tabs, any ideas? I want the above link to open on the third tab when the page is loaded

<script>
$(function() {
//	$('article.tabs').tabs();
	$("article.tabs").tabs({
		activate : function(event, ui)
		{
			var tableInstances = TableTools.fnGetMasters(), instances = tableInstances.length;

			while (instances--)
			{
				var dataTable = tableInstances[instances];
				if (dataTable.fnResizeRequired())
				{
					dataTable.fnResizeButtons();
				}
			}
		}
	});
});
</script>
2

You’re not using jQueryUI for the tabs widget, you’re using Bootstrap

This will work as you desire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <title>Bootstrap tabs</title>
    <link rel="stylesheet" href="http://lsintel.com/include/bootstrap/css/bootstrap.css" type="text/css">
  </head>
  <body>
    <div id="wrapper">
      <div id="content">
        <div class="container" id="gallery">
          <div class="content_page">
            <div class="row">
              <div class="span8">
                <div class="content_full_size">
                  <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" data-toggle="tab">Overview</a></li>
                    <li><a href="#tab2" data-toggle="tab">Table of Contents </a></li>
                    <li><a href="#tab3" data-toggle="tab">Sample Request</a></li>
                  </ul>
                  <div class="tabbable">
                    <div class="tab-content">
                      <div class="tab-pane active" id="tab1">
                        <p>Pane A</p>
                      </div>
                      <div class="tab-pane" id="tab2">
                        <p>Pane B</p>
                      </div>
                      <div class="tab-pane" id="tab3">
                        <p>Pane C</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="http://lsintel.com/js/jquery.min.js"></script>
    <script type="text/javascript" src="http://lsintel.com/include/bootstrap/js/bootstrap.min.js"></script>
    <script>
      var target = window.location.hash;
      $('a[href=' + target + ']').click();
    </script>
  </body>
</html>

Yup. Tidy up your page. There is a JS error in the console that could stop script execution. The HTML is invalid (85 errors) and you are including random scripts / CSS all over the place. You are also including an insane amount of JS libs and plugins - do you really need all of those? Consider concatenating them and using up-to-date versions (e.g. you are using Bootstrap 2.x and jQuery 1.7).

HTH

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.