如何使用 jQuery 构建简单的选项卡?

IT技术 javascript jquery html css tabs
2021-03-10 05:14:44

我有以下代码:小提琴

这在我自己创建的网站中效果很好,没有 JS,选项卡充当到相关部分的跳转链接。当放置在定制的 CMS 中时,我现在被迫使用跳转链接不起作用。我尝试向选项卡添加更多相关链接,这使其在没有 JS 的情况下工作,但使用 JS 时,选项卡式内容不显示。

我错过了什么吗?

html:

<ul id="tabs">

      <li><a href="#tab1">test1</a></li>
      <li><a href="#tab2">test2</a></li>
      <li><a href="#tab3">test3</a></li>
      <li><a href="#tab4">test4</a></li>

</ul>
      <div class="container" id="tab1">Some content</div>
      <div class="container" id="tab2">Some content</div>
      <div class="container" id="tab3">Some content</div>
      <div class="container" id="tab4">Some content</div>

jQuery:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');        
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');         
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');    
}
6个回答

我猜你的网站在使用 href 时有问题,我认为当用户点击一个 href 时,网站会自动根除。

这是新解决方案的 jsFiddle。

我有一个新的解决方案给你:

更新的jQuery:

$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

新的 html 标记:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>
你是对的,我猜是其他东西阻止了它,但要小心 if 条件,在你的例子中,你使用它是错误的。仔细检查我的病情在示例中的位置。
2021-04-24 05:14:44
我确信在其他网站上运行良好,不知道为什么所有跳转链接都重定向到主页。觉得我最好联系开发商
2021-04-28 05:14:44
这不是我的网站,如果有帮助,我可以私下向您发送链接,但作为其商业广告,我不确定是否可以在此处发布
2021-05-01 05:14:44
不幸的是,它在站点中不起作用。我将不得不回到开发人员那里。感谢您的所有帮助我将标记为已回答,因为它是有效的代码并且一个很好的答案在我被迫使用的系统中不起作用
2021-05-11 05:14:44
你网站的链接是什么?
2021-05-17 05:14:44
$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
    e.preventDefault();
    if ($(this).attr("id") == "current"){ //detection for current tab
     return       
    }
    else{             
    $("#content div").hide(); //Hide all content
    $("#tabs li").attr("id",""); //Reset id's
    $(this).parent().attr("id","current"); // Activate this
    $( $(this).attr('href')).fadeIn(); // Show content for current tab
    }
});

});

见演示:http : //jsfiddle.net/pradeepk00786/5ezT3/

这真好!但不适用于动态添加的 html。
2021-04-23 05:14:44

解决方案 JSFiddle:: https://jsfiddle.net/incorelabs/mg6e4ren/74/

实现 Tabs 非常简单,我已经针对您的问题稍微修改了 HTML。删除了锚标签,因为它们不需要。

HTML

<ul>
    <li class="tab-switcher" data-tab-index="0" tabindex="0">
        Tab 1
    </li>
    <li class="tab-switcher" data-tab-index="1" tabindex="0">
        Tab 2
    </li>
    <li class="tab-switcher" data-tab-index="2" tabindex="0">
        Tab 3
    </li>
    <li class="tab-switcher" data-tab-index="3" tabindex="0">
        Tab 4
    </li>
</ul>
<div id="allTabsContainer">
    <div class="tab-container" data-tab-index="0">
        Some content for Tab - 1
    </div>
    <div class="tab-container" data-tab-index="1" style="display:none;">
        Some content for Tab - 2
    </div>
    <div class="tab-container" data-tab-index="2" style="display:none;">
        Some content for Tab - 3
    </div>
    <div class="tab-container" data-tab-index="3" style="display:none;">
        Some content for Tab - 4
    </div>
</div>

HTML 解谜

  1. 将“tab-switcher”类添加到每个“li”元素以及 tabindex="0" 以使其可访问。
  2. 给每个“li”一个“data-tab-index”属性。
  3. 将“tab-container”类添加到每个选项卡式容器。还为每个容器提供一个“data-tab-index”属性,该属性对应于“li”元素上的“data-tab-index”属性。
  4. 仅显示您希望可见的容器,使用“display:none”隐藏其他容器。
  5. 为选项卡式容器的所有内容提供一个父容器。在这个例子中,这是“allTabsContainer”div。

jQuery

$(document).ready(function () {
    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click keypress', function (event) {
        // event.which === 13 means the "Enter" key is pressed

        if ((event.type === "keypress" && event.which === 13) || event.type === "click") {

            var tabClicked = $(this).data("tab-index");

            if(tabClicked != previousActiveTabIndex) {
                $("#allTabsContainer .tab-container").each(function () {
                    if($(this).data("tab-index") == tabClicked) {
                        $(".tab-container").hide();
                        $(this).show();
                        previousActiveTabIndex = $(this).data("tab-index");
                        return;
                    }
                });
            }
        }
    });
});

jQuery 解谜

  1. “tab-switcher”上的点击和按键监听器在“document.ready”上初始化。(注意:按键仅注册“Enter”键)
  2. 变量“previousActiveTabIndex”跟踪前一个活动选项卡,因此如果我们一次又一次地按下同一个选项卡,它可以被忽略。
  3. 我们在“标签容器”上运行 EACH 循环。这样做是为了知道应该显示哪个选项卡。如果每个匹配的“data-tab-index”数据属性,我们将显示该选项卡。
  4. 我们将“data-tab-index”的值保存在“previousActiveTabIndex”中,这有助于我们跟踪点击的上一个选项卡。

如果有疑问或有人有建议,请在帖子中发表评论。

这个想法的问题是没有可访问性。用户无法使用键盘。
2021-04-26 05:14:44
@RicardoZea 我已经更新了 JSFiddle 以及代码以使其可通过键盘访问。感谢您的反馈。
2021-04-28 05:14:44
@incorelabs 非常好,感谢修复。将我的投票更改为 upvote。
2021-05-05 05:14:44
@RicardoZea 对此表示赞赏。:)
2021-05-06 05:14:44
这是一个很好的答案。
2021-05-11 05:14:44

包括jQuery:

https://code.jquery.com/jquery-3.1.1.min.js

HTML:

<br>
<div align="center" >
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button>
</div>
<br />
<div class="gtabs demo" >
  <div class="gtab active tab-1">
    <h1>Gtab 1</h1>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button>
  </div>

  <div class="gtab tab-2">
    <h1>Gtab 2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore.
    </p>
  </div>

  <div class="gtab tab-3">
    <h1>Gtab 3</h1>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui.
</p>

CSS:

.gtabs {
  position: relative;
  .gtab {
    background: #eee;
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    top: 5px;
    transition: all 0.4s;
    &.active {
      opacity: 1;
      visibility: visible;
      top: 0;
      transition: all 0.4s;
    }
  }
}

JS:

$("[data-toggle='tab']").click(function () {
  var tabs = $(this).attr('data-tabs');
  var tab = $(this).attr("data-tab");
  $(tabs).find(".gtab").removeClass("active");
  $(tabs).find(tab).addClass("active");
});

演示:http : //codepen.io/iksdatoo/pen/NjOZrm

    <script>
 $('.tabheading li').click(function () {
        var tabid = $(this).attr("rel");
        $(this).parents('.tabcontainer').find('.active').removeClass('active');
        $('.tabbody').hide();
        $('#' + tabid).show();
        $(this).addClass('active');

        return false;
    });
</script>

点击这里