Лучший способ использовать вкладки самонастройки с их содержимым

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

Вы пробовали с помощью данных-тумблер = "закладка"? Недавно я создал аналогичный пример без javascript, включив bootstrap.min.js, jquery.min.js и bootstrap.min.css и отметив вкладки.

Во-первых, пометить "а" пунктов с данными-тумблер = "закладка"

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

Во-вторых, отметьте вам Див элементы контента с классом = "на вкладке-панели"

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

Наконец , чтобы добавить включенную по умолчанию вкладку, добавьте активный класс в один из ваших divs

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