带有jquery的选项卡式导航

时间:2010-10-14 08:52:15

标签: javascript jquery-tabs

我需要帮助创建和actice状态在这里是我的javascriptand部分我的HTML我似乎无法进入css在这里请请求它,如果你需要它 我需要它,所以哪个标签你在它上显示与活动容器背景相同的颜色,在连接上没有边框我需要这个顶部和侧面标签任何帮助如何做到这一点将非常感激,因为香港专业教育学院寻找解决方案的日子,我只能找到的插件是我不想使用的插件

我也尝试发布图片,但我不允许

java脚本

$(document).ready(function () {

$("a").click(function () {
    $(".side").show(".fastest");
});


$(".overveiw").click(function () {
    $(".hide").hide();
    $(".div1").show();
    $(".overveiw").addClass("active");

});



$(".tour").click(function () {
    $(".hide").hide();
    $(".div2").show();

});


$(".websites").click(function () {
    $(".hide").hide();
    $(".div3").show();


});


$(".faq").click(function () {
    $(".hide").hide();
    $(".div4").show();


});


$(".support").click(function () {
    $(".hide").hide();
    $(".div5").show();


});

});

顶部导航标签

  <ul>
    <li class="dealer"><a class="dealer">Manufacturer Dealer</a></li>
    <li class="lender"><a>Lender<br />&nbsp</a></li>
    <li class="developer"><a>Developer<br />&nbsp</a></li>
 </ul>

侧面导航

<ul class="side">
    <li class="overveiw data-panel"><a>Overveiw</a></li>
    <li class="tour data-panel"><a>Take the tour</a></li>
    <li class="websites data-panel"><a>Example websites</a></li>
     <li class="faq data-panel"><a>FAQ</a></li>
    <li class="support data-panel"><a>Support</a></li>
  </ul>

和包含主容器中包含div的5个

1 个答案:

答案 0 :(得分:0)

修复现在设法创造我以后的效果。经过多次试验和错误后,我在每个标签上使用的代码可能有更简单的方法,但现在可以使用

$(".tour").click(function () {
    $(".hide").hide();
    $(".div2").show();
    $(".tab").addClass("inactive");
    $(".tour").removeClass("inactive");
    $(".tour").addClass("active");

});