Question

我有一个按钮＆＃34;查找游戏＆＃34;和导航链接＆＃34;登录＆＃34;在主页上。两个链接都转到同一页面＆＃34; player.html＆＃34;但是当＆＃34;找到游戏＆＃34;如果选中，我希望该标签成为活动标签但是当＆＃34;登录＆＃34;如果选中，我希望活动标签为＆＃34;个人资料＆＃34;。

目前，＆＃34;寻找游戏＆＃34;选项卡是打开页面时的活动选项卡。我怎么能这样做？

html

<ul class="navigation">
            <li id="myProfile-tab" class="nav-myTabs">
                <a data-toggle="tab" href="#information"><img id="profile-colour" class="center-block" src="images/david_profilepic.png" alt="Player icon" width="40" height="40"><br>My Profile
                </a>            
            </li>
            <li id="findGames-tab" class="active nav-myTabs">
                <a data-toggle="tab" href="#find-games">
                    <img class="center-block" src="images/pitch.png" alt="Pitch icon" width="30" height="30"><br>Find Games
                </a>
            </li>                   
            <li id="myBenches-tab" class="nav-myTabs">
                <a data-toggle="tab" href="#my-benches">
                    <img id="bench-colour" class="center-block" src="images/white_bench.png" alt="Black bench" width="30" height="12"><br>My Benches</a>
            </li>
          </ul>

我已将以下javascript添加到主页＆＃34;登录＆＃34;

<script type="text/javascript">
    document.getElementById("login").addEventListener("click", profileTab);
</script>

这是我的javascript文件：

$(function profileTab() {
      $('findGames-tab').removeClass('active');
      $('myProfile-tab').addClass('active');
    }
)

Answer 1

将一个click事件处理程序附加到anchor元素，并在其最近的'li'元素上切换活动类：

$(".navigation a[data-toggle='tab']").click(function(e){
    $(this).closest('li').toggleClass('active')
  });

注意：您可以通过为锚点指定id来提高代码的性能，因为基于属性的搜索不是那么精通。

Answer 2

您可以使用查询字符串来存储默认情况下要打开的选项卡，并让每个链接使用不同的值。

如：

<a href="/player.html?openTab=findGames">Find Games</a>
<a href="/player.html?openTab=myProfile">Login</a>

然后使用类似此javascript代码段的内容来提取值：

(function (jQuery) {
    jQuery.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i) {
            var p = a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'));
})(jQuery);

像这样：

var tab = jQuery.QueryString['openTab']
var tabHref = jQuery('#' + tab + '-tab').attr('href');
jQuery('#tabs').tabs('select', tabHref);

利用网址的另一个选择是以类似的方式使用location.hash。

如何设置哪个选项卡处于活动状态，具体取决于单击哪个按钮进入页面

2 个答案: