Question

我有一个menu.jsp文件，它包含在文件A和B中。此文件包含一个如下所示的菜单。感谢data-toggle =＆＃34; tab＆＃34;所选标签处于活动状态。但是我也想使用href转到那个特定的页面。这不起作用。有人告诉我如何解决这个问题？

<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>

我在头脑中添加了以下内容：

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

我在身体的底部添加了以下内容：

<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">

我有一个facebook和twitter的javascript文件：

(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');

menu.css文件只是：

@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;
}
}

Answer 1

页面的href不起作用，因为您使用的是bootstrap，而data-toggle="tab"属性表示您使用href表示tab。

Bootstrap期望您使用对同一html中的部分的引用，例如href="#yourDiv"。

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

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

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 =＆＃34; tab＆＃34;时，href不起作用

1 个答案: