Question

我正在尝试在点击时创建包含其内容的导航栏。我的代码看起来很蹩脚。有没有办法缩短我的代码？

例如：当单击房间时，JQuery会将active课程添加到#nav-hotel，并从其他active元素中删除li课程。它还设置了本身和其他人的visibility和display。

HTML：

<ul class="nav nav-tabs">
                <li id="nav-hotel" role="presentation"><a href="#tab-hotel">Rooms</a></li>
                <li id="nav-flight" role="presentation"><a href="#tab-flight">Flights</a></li>
                <li id="nav-restaurant" role="presentation"><a href="#tab-restaurant">Restaurants</a></li>
            </ul>
            <div class="tab-content">
                <div id="tab-hotel">hotel</div>
                <div id="tab-flight">flight</div>
                <div id="tab-restaurant">restaurant</div>
            </div>

JQuery的：

$("#nav-hotel").click(function () {
        $("#nav-hotel").toggleClass("active");
        $("#tab-hotel").css("display", "block");
        $("#tab-hotel").css("visibility", "visible");
        $("#nav-flight").removeClass("active");
        $("#tab-flight").css("display", "none");
        $("#tab-flight").css("visibility", "hidden");
        $("#nav-restaurant").removeClass("active");
        $("#tab-restaurant").css("display", "none");
        $("#tab-restaurant").css("visibility", "hidden");
    });
    $("#nav-flight").click(function () {
        $("#nav-flight").toggleClass("active");
        $("#tab-flight").css("display", "block");
        $("#tab-flight").css("visibility", "visible");
        $("#nav-hotel").removeClass("active");
        $("#tab-hotel").css("display", "none");
        $("#tab-hotel").css("visibility", "hidden");
        $("#nav-restaurant").removeClass("active");
        $("#tab-restaurant").css("display", "none");
        $("#tab-restaurant").css("visibility", "hidden");
    });
    $("#nav-restaurant").click(function () {
        $("#nav-restaurant").toggleClass("active");
        $("#tab-restaurant").css("display", "block");
        $("#tab-restaurant").css("visibility", "visible");
        $("#nav-flight").removeClass("active");
        $("#tab-flight").css("display", "none");
        $("#tab-flight").css("visibility", "hidden");
        $("#nav-hotel").removeClass("active");
        $("#tab-hotel").css("display", "none");
        $("#tab-hotel").css("visibility", "hidden");
    });

Answer 1

您是否尝试过使用data-toggle =＆＃34;标签＆＃34;？我最近创建了一个没有javascript的类似示例，包括bootstrap.min.js，jquery.min.js和bootstrap.min.css并标记选项卡。

首先，标记你的＆＃34; a＆＃34;带有data-toggle =＆＃34; tab＆＃34;

的项目

 <li id="nav-hotel" role="presentation">
   <a href="#tab-hotel" data-toggle="tab">Rooms</a>
 </li>

其次，使用class =＆＃34; tab-pane＆＃34;

标记div内容项

<div id="tab-hotel" class="tab-pane">hotel</div>

最后，要添加默认启用标签，请将活动类添加到其中一个div

<div id="tab-hotel" class="tab-pane active">hotel</div>

使用引导选项卡及其内容的最佳方法

1 个答案: