Щебетать Twitter-бутстрапа: Открыть конкретную вкладку

У меня есть следующий код, который отлично работает в качестве вкладок - однако мне бы хотелось, если бы я посетил www.mysite.com/#female, чтобы вкладка «Женщина» стала активной и отображает содержимое на панели «Женщины».Щебетать Twitter-бутстрапа: Открыть конкретную вкладку

Как это достичь? Как вы можете видеть, я сделал попытку с моим кодом, но это не удалось.

Демо:https://jsfiddle.net/2yocpy2k/

<!DOCTYPE html> 
<html> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="content-type"> 
    <meta content="noindex, nofollow" name="robots"> 
    <meta content="noindex, nofollow" name="googlebot"> 
    <base href="https://fiddle.jshell.net/2yocpy2k/show/light/"> 
    <script src="//code.jquery.com/jquery-compat-git.js" type= 
    "text/javascript"> 
    </script> 
    <link href="/css/normalize.css" rel="stylesheet" type="text/css"> 
    <link href="/css/result-light.css" rel="stylesheet" type="text/css"> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" 
    type="text/javascript"> 
    </script> 
    <link href= 
    "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel= 
    "stylesheet" type="text/css"> 
    <style type="text/css"> 
    /* Latest compiled and minified CSS included as External Resource*/ 

    /* Optional theme */ 
    @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

    body { 
    margin: 10px; 
    } 
    </style> 
    <title>Bootstrap 3 Template</title> 
    <script type='text/javascript'> 
    //<![CDATA[ 
    $(window).on('load', function() { 
    /* Latest compiled and minified JavaScript included as External Resource */ 

    // Javascript to enable link to tab 
    var url = document.location.toString(); 
    if (url.match('#')) { 
    $('.nav-tabs li h2 a[href="#' + url.split('#')[1] + '"]').tab('show'); 
    } 

    // Change hash for page-reload 
    $('.nav-tabs li h2 a').on('shown.bs.tab', function (e) { 
    window.location.hash = e.target.hash; 
    }) 
    });//]]> 

    </script> 
</head> 
<body> 
    <div class="container"> 
     <p>Hello</p> 
     <p>and</p> 
     <p>Welcome!</p> 
     <ul class="nav nav-tabs" id="myTab"> 
      <li> 
       <h2><a data-target="#female" data-toggle="tab">Female</a></h2> 
      </li> 
      <li> 
       <h2><a data-target="#male" data-toggle="tab">Male</a></h2> 
      </li> 
     </ul> 
     <div class="tab-content"> 
      <div class="tab-pane" id="female"> 
       Open Female 
      </div> 
      <div class="tab-pane" id="male"> 
       Open Male 
      </div> 
     </div> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p>&nbsp;</p> 
     <p></p> 
    </div> 
</body> 
</html>

источник

2016-10-06 michaelmcgurk

http://stackoverflow.com/questions/15678511/opening-tab-with-anchor-link любая помощь? – SomeGuy

Вы можете создать функцию, которая добавляет активный класс, когда хэш существует на странице загрузки. Включите это в вашей верхней части сценария следующим образом:

$(function() { 
    var hashTab = window.location.hash; 
    if (hashTab != '') { 
     $('.nav-tabs a[href="' + hashTab + '"]').tab('show'); 
     $(hashTab).addClass('active'); 
    } 
});

источник

2016-10-06 16:48:14

Спасибо за ваш ответ - однако, когда я пытаюсь это сделать, я получаю 'jquery-git.js: 1586 Ошибка при отсутствии: ошибка синтаксиса, нераспознанное выражение: .nav-tabs a [href = # female]' ошибка. – michaelmcgurk

Изменение его на '$ ('. Nav-tabs a [href ="' + hashTab + '"]'). Tab ('show');' resolved this :-) – michaelmcgurk

Спасибо, я обновил ответ! –

Щебетать Twitter-бутстрапа: Открыть конкретную вкладку

ответ

Смежные вопросы