如何使用 js/css 使标签内容可见

Question

我正在处理标签

有 5 个标签

关于我们 我们的工作 我们的团队 新闻与事件 联系我们

每个里面都有内容和链接、图片。

每当我点击选项卡内的链接时，我想要在这里实现的目标我们的团队内容，

它应该会打开联系我们标签内容。

这是我目前使用的代码，它使用了一些自定义 js 和 jquery 2.2.0。

请检查代码，我这里没有放 css。

这个例子的直播链接是Live Demo

请帮帮我

// TABS
    var tabs = $('.container_tabs');
    $('.tabs-content > div', tabs).each(function (i) {
        if (i != 0) $(this).hide(0);
    });
    tabs.on('click', '.tabs a', function (e) {

        e.preventDefault();

        var tabId = $(this).attr('href');


        $('.tabs a', tabs).removeClass();
        $(this).addClass('active');

        $('.tabs-content > div', tabs).hide(0);
        $(tabId).show();

    });

    // var tabs1 = $('.container_tabs1');
    // $('.tabs-content > div', tabs1).each(function (i) {
    //     if (i != 0) $(this).hide(0);
    // });
    // tabs1.on('click', '.tabs a', function (e) {
    //
    //     e.preventDefault();
    //
    //     var tabId = $(this).attr('href');
    //
    //
    //     $('.tabs a', tabs1).removeClass();
    //     $(this).addClass('active');
    //
    //     $('.tabs-content > div', tabs1).hide(0);
    //     $(tabId).show();
    //
    // });

    (function ($) {
        jQuery.fn.lightTabs = function (options) {

            var createTabs = function () {
                tabs = this;
                i = 0;

                showPage = function (tabs, i) {
                    $(tabs).children("div").children("div").hide();
                    $(tabs).children("div").children("div").eq(i).show();
                    $(tabs).children("ul").children("li").removeClass("active");
                    $(tabs).children("ul").children("li").eq(i).addClass("active");
                };

                showPage(tabs, 0);

                $(tabs).children("ul").children("li").each(function (index, element) {
                    $(element).attr("data-page", i);
                    i++;
                });

                $(tabs).children("ul").children("li").click(function () {
                    showPage($(this).parent().parent(), parseInt($(this).attr("data-page")));
                });
            };
            return this.each(createTabs);
        };
    })(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
            <ul class="cw-30">
               
               <li class="" data-page="0">About Us</li>
               
               <li data-page="1">Our Work</li>
               
               <li data-page="2">Our Team</li>
               
               <li data-page="3">Our Partners</li>
                              
               <li data-page="4" class="active">Work With Us</li>
                              
               <li data-page="5">Contact us</li>
            </ul>
            <div class="cw-70">
               <div class="content" style="display: none;">   
                  Content 1
               </div>
               <div class="content" style="display: none;">
                  Content 2 
               </div>
               <div class="content" style="display: none;">
                  Content 3
               </div>
               <div class="content" style="display: none;">
                  Content 4
               </div>
               <div class="content" style="display: none;">
                  <h3>Contact us Content</h3>
               </div>
            </div>
         </div>

Answer 1

如果我理解正确，您也希望能够通过选项卡内容内的链接切换选项卡。在这种情况下，您应该创建一个用于切换选项卡的功能，而不是菜单中的单击事件。这是一个例子：

编辑#1： 我删除了所有 onclicks 并将 switchTab 函数绑定到所有具有 switch-tab 类的元素。

编辑#2： 根据要求，您可以从 url ?tab=x codepen 传递初始标签号

// set tab from url
// sample url: http://mywebsite.com/my-route?tab=2
$(document).ready(function() {
  var url = new URL(window.location.href);
  var tabNumber = url.searchParams.get('tab');
  if (tabNumber)
    switchTab(tabNumber);
});

// change tab by clicking an element with "switch-tab" class
$('.switch-tab').on('click', function(e) {
  var tabNumber = e.target.getAttribute('data-tab');
  switchTab(tabNumber);
});

// change tab by passing tab number 
function switchTab(tabNumber) {
  $('#tabs li').removeClass('active');
  $('#tabs li[data-tab=' + tabNumber + ']').addClass('active');
  
  $('.content').css('display', 'none');
  $('.content[data-content=' + tabNumber + ']').css('display', 'block');
}

<style>
  #tabs li.active {
    font-weight: bold;
  }
  .content {
    display: none;
  }
  .content.visible {
    display: block;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs cw-wrapper">
  <ul class="cw-30" id="tabs">
    <li data-tab="0" class="switch-tab">About Us</li>
    <li data-tab="1" class="switch-tab">Our Work</li>
    <li data-tab="2" class="switch-tab">Our Team</li>
    <li data-tab="3" class="switch-tab">Our Partners</li>
    <li data-tab="4" class="switch-tab active">Work With Us</li>
    <li data-tab="5" class="switch-tab">Contact us</li>
  </ul>
  <div class="cw-70">
    <div class="content" data-content="1">   
      <p>Content 1</p>
    </div>
    <div class="content" data-content="2">
      <p>Content 2</p>
    </div>
    <div class="content" data-content="3">
      <p>Content 3</p>
    </div>
    <div class="content visible" data-content="4">
      <p>Content 4</p>
      <a href="#" data-tab="5" class="switch-tab">go to contact us</a>
    </div>
    <div class="content" data-content="5">
      <h3>Contact us Content</h3>
    </div>
  </div>
</div>