Как сделать вкладку boostrap перейти к определенной ссылке в событии клика, а не показывать #tab

Question

В настоящее время я использую Bootstrap 3.3.4, и я использую вкладки JQuery. То, что я пытаюсь сделать, - сделать одну из моих вкладок, перейти к определенной ссылке isntead в div. Вот краткий пример того, что я хочу сделать:

<ul class="nav nav-tabs"> 
    <li class="active" id="title-one"><a href="#tab1">TAB 1</a></li> 
    <li id="title-two"><a href="#tab2">TAB 2</a></li> 
    <li id="title-three"><a href="www.google.com">TAB 3</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active">Content 1</div> 
    <div id="tab2" class="tab-pane fade ">Content 2</div> 
</div> 

Так в основном, когда я нажимаю на вкладке 3 вместо того, чтобы идти к «конкретному DIV» Я хочу вкладку перенаправить меня в реальную ссылку на моем HREF , Я не знаю, если некоторые bs js избегают действия или мне нужно добавить дополнительные js.

Вот небольшая скрипка тоже: https://jsfiddle.net/x3axxru9/

Я ценю вашу помощь!

Answer 1

В вашей скрипке у вас есть атрибуты boottrap «data-toggle» в ваших элементах списка вкладок. Попробуйте удалить данные-toggle = "tab" из списка. Я думаю, это то, что останавливает вашу связь от запуска.

Answer 2

Просто удалите атрибут data-toggle = "tab" из элемента <a> и он будет работать так, как вы хотите.

<ul class="nav nav-tabs"> 
    <li class="active" id="title-one"><a data-toggle="tab" id="tab-one" href="#tab1">TAB 1</a></li> 
    <li id="title-two"><a data-toggle="tab" id="tab-two" href="#tab2">TAB 2</a></li> 
    <li id="title-three"><a id="tab-three" href="www.google.com">TAB 3</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active">Content 1</div> 
    <div id="tab2" class="tab-pane fade ">Content 2</div> 
    <div id="tab3" class="tab-pane fade ">Content 3</div> 
</div>