简体   繁体   English

使用jQuery的选项卡式导航

[英]tabbed navigation with jquery

i need help creating and actice state on tabs here is my javascriptand part of my html i cant seem to enter css on here please request it if you require it i need it so which ever tab you are on it shows the same color as the active container background with no borders on the join i need this for the top and side tabs any help on how to do this would be much appreciated as ive looked for days for a solution and only ones i can find are plugins which i dont want to use 我需要在选项卡上创建和actice状态的帮助,这是我的javascript,并且是我html的一部分,我似乎无法在此处输入CSS,如果您需要它,请提出要求,我需要它,因此无论您在哪个选项卡上都显示与活动页面相同的颜色容器背景,在联接上没有边框,我需要顶部和侧面选项卡使用它,有关此操作的任何帮助将不胜感激,因为我花了几天时间寻找解决方案,并且只有我能找到的是我不想使用的插件

also i tried to post an image but im not allowed 我也试图发布图片,但我不允许

java script 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();


});

}); });

top navigation tabs 顶部导航标签

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

side navigation 侧面导航

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

and 5 containing divs wrapped in a main container 和5个包含在主容器中的divs

fixed now managed to create the effect i was after. 修复现在设法创造了我所追求的效果。 after much trial and error here is the code i used for each tab maybe there is a simpler way to do it but this works for now 经过多次试验和错误后,这里是我用于每个标签的代码,也许有一种更简单的方法可以执行此操作,但现在可以使用

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

});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM