使用data-toggle =“tab”时href不起作用 [英] href doesn't work when using data-toggle="tab"

问题描述

我有一个包含在文件A和B中的menu.jsp文件。这个文件包含一个如下所示的菜单。由于data-toggle =tab，所选标签处于活动状态。不过，我也想使用href进入该特定页面。这不起作用。任何人都可以告诉我如何解决这个问题？

 < ul id =navbar_menuclass =nav nav-tabsrole =tablist> 
< li>< a data-toggle =tabhref =filea.jsp> A< / a>< / li> 
< li>< a data-toggle =tabhref =fileb.jsp> B< / a>< / li> 
< / ul> 
  

我在头部添加了以下内容：

 < link 
 href =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
 rel =样式表/> 
  

我在正文的底部添加了以下内容：

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js><<<< ; /脚本> 
 
< script src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js\"> 
  

facebook和twitter：

 （function（d，s，id）{
 var js，fjs = d.getElementsByTagName （s）[0]; 
 if（d.getElementById（id））
 return; 
 js = d.createElement（s）; 
 js.id = id; 
 js.src =//connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v2.3; 
 fjs.parentNode.insertBefore（js，fjs）; 
}（document，'script'，'facebook-jssdk'））; 
 
！function（d，s，id）{
 
 
 var js，fjs = d.getElementsByTagName（s）[0]，p = / ^ http ：/ 
 .test（d.location）？ 'http'：'https'; 
 if（！d.getElementById（id））{
 js = d.createElement（s）; 
 js.id = id; 
 js.src = p +'：//platform.twitter.com/widgets.js'; 
 fjs.parentNode.insertBefore（js，fjs）; 
} 
}（文档，'script'，'twitter-wjs'）; 
  

menu.css文件只是：

  @CHARSETISO-8859-1; 
 
 body {
 font-family：'建筑师女儿'，草书; 
} 
 
 h1 {
颜色：红色; 
} 
 
 span {
颜色：蓝色; 
} 
 
 
 #my_profile {
 
 class：active; 
} 
 
 @media screen和（max-width：600px）{
 body {
 background-color：lightblue; 
} 
 #navbar_menu {
 display：none; 
} 
} 
  

解决方案

href 不能工作，因为您正在使用引导程序并且 data-toggle =tab属性表示您对选项卡使用 href 。

Bootstrap期望您使用对同一html内部的部分的引用，如 href =＃yourDiv。

有关引导程序如何处理 data-toggle =tab的更多详细信息位于引导程序js代码中，请检查这里。
您可以发现bootstrap可以防止默认的 href 行为并使用它来加载所需的数据。

如果您想在与boostrap选项卡相关的部分中加载页面，可以使用jQuery实现，例如：

HTML：

 < ul id =navbar_menuclass =nav nav-tabsrole =tablist> 
< li class =active>< a data-toggle =tabhref =＃diva> A< / a>< / li> 
< li>< a data-toggle =tabhref =＃divb> B< / a>< / li> 
< / ul> 
 
< div class =tab-content> 
< div class =tab-pane activeid =diva> 
< / div> 
< div class =tab-paneid =divb> 
< / div> 
< / div> 
  

JS：

  $（ '＃天后'）负载（ 'filea.jsp'）; 
 $（'＃divb'）。load（'fileb.jsp'）; 
  

I have a menu.jsp file which is included in file A and B. This file contains a menu that looks like below. Thanks to data-toggle="tab" the chosen tab is active. However I also want to go to that particular page using the href. This doesn't work. Kan anyone tell me how to fix this?

<ul id="navbar_menu" class="nav nav-tabs" role="tablist">
    <li><a data-toggle="tab" href="filea.jsp">A</a></li>
    <li><a data-toggle="tab" href="fileb.jsp">B</a></li>
</ul>

I added the following in the head:

<link
    href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
    rel="stylesheet" /> 

I have added the following in the bottom of the body:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
‌​
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">

I have a javascript file for facebook and twitter:

(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id))
                return;
            js = d.createElement(s);
            js.id = id;
            js.src = "//connect.facebook.net/sv_SE/sdk.js#xfbml=1&version=v2.3";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

        !function(d, s, id) {


var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/
                    .test(d.location) ? 'http' : 'https';
            if (!d.getElementById(id)) {
                js = d.createElement(s);
                js.id = id;
                js.src = p + '://platform.twitter.com/widgets.js';
                fjs.parentNode.insertBefore(js, fjs);
            }
        }(document, 'script', 'twitter-wjs');

The menu.css file is just:

@CHARSET "ISO-8859-1";

body{
    font-family: 'Architects Daughter', cursive;
}

h1{
    color: red;
}

span{
    color: blue;
}


#my_profile{

    class:"active";
}

@media screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }   
    #navbar_menu {
    display: none;
}
}

解决方案

The href to a page is not going to work, because you are using bootstrap and the data-toggle="tab" attribute indicates that you are using a href for a tab.

Bootstrap expects that you are using a reference to a section inside the same html, like href="#yourDiv".

More details on how bootstrap handles the data-toggle="tab" are in the bootstrap js code, check here. There you could find that bootstrap prevents default href behavior and use it to load the desired data.

If you are trying to load a page inside the section related to a boostrap tab, you could achieve this using jQuery, example:

HTML:

<ul id="navbar_menu" class="nav nav-tabs" role="tablist">
    <li class="active"><a data-toggle="tab" href="#diva">A</a></li>
    <li><a data-toggle="tab" href="#divb">B</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="diva">
    </div>
    <div class="tab-pane" id="divb">
    </div>
</div>

JS:

$('#diva').load('filea.jsp');
$('#divb').load('fileb.jsp');

这篇关于使用data-toggle =“tab”时href不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！