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

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

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

修改＃2： 根据要求，您可以通过网址?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>

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

1 个答案: