使用 jquery 进行选项卡式导航

发布于 2024-09-27 13:54:05 字数 1687 浏览 7 评论 0原文

我需要帮助在选项卡上创建和执行状态，这是我的 javascript 和我的 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>

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

原文

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

also i tried to post an image but im not allowed

java script

$(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 /> </a></li>
    <li class="developer"><a>Developer<br /> </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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

挽容 2024-10-04 13:54:05

现在已修复，设法创造出我想要的效果。经过多次尝试和错误，这是我用于每个选项卡的代码，也许有一种更简单的方法来做到这一点，但这目前有效

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

});

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");

});

回复收藏 0 原文

~没有更多了~