Question

我正在使用以下示例中的标签，但我不确定如何使用jQuery激活不同的标签。

http://minth.amazyne.com/v-1.6/shortcode-tabs.html

我无法找到上述功能，因此我正在自己工作。但我无法做到正确

<ul class="nav tab-theme tab-icons donate-tab">
  <li class="active">
    <a href="#tabD1" data-toggle="tab">
      <span class="icon-tab icon-wallet donation-icons"></span>
      <h2 class="icon-text">Heading 1</h2>
    </a>
  </li>
  <li>
    <a href="#tabD2" data-toggle="tab">
      <span class="icon-tab icon-envelope donation-icons"></span>
      <h2 class="icon-text">Heading 2</h2>
    </a>
  </li>
  <li>
    <a href="#tabD3" data-toggle="tab">
      <span class="icon-tab icon-laptop donation-icons"></span>
      <h2 class="icon-text">Heading 3</h2>
    </a>
  </li>
  <li>
    <a href="#tabD4" data-toggle="tab">
      <span class="icon-tab icon-phone donation-icons"></span>
      <h2 class="icon-text">Heading 4</h2>
    </a>
  </li>
  <li>
    <a href="#tabD5" data-toggle="tab">
      <span class="icon-tab icon-mobile donation-icons"></span>
      <h2 class="icon-text">Heading 5</h2>
    </a>
  </li>
</ul>

JS

   var getQueryString = function (field, url) {
        var href = url ? url : window.location.href;
        var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
        var string = reg.exec(href);
        return string ? string[1] : null;
    };

    var tabid = null;
    tabid = getQueryString('tab'); // returns 'chicken'
    //var thatOne = getQueryString('that'); // returns 'sandwich'
    //var anotherOne = getQueryString('another'); // returns null
    //donate-tab
    //tabid = "tabD4";
    if (tabid !=null)
    {
        // $('.donate-tab li').removeClass('active');
       // $('.donate-tab li').bind('click');
        //$('#tbd4').trigger("click");

        if (tabid == "tabD1") {
           // $('.donate-tab li:nth-child(1)').toggleClass('active');
            //$('.donate-tab li:nth-child(1)').trigger("click");
            $('#tabD1').trigger("click");
        }
        if (tabid == "tabD2") {
            //$('.donate-tab li:nth-child(2)').toggleClass('active');
            //$('.donate-tab li:nth-child(2)').trigger("click");
            $('#tabD2').trigger("click");
        }
        if (tabid == "tabD3") {
            $('.donate-tab li:nth-child(3)').toggleClass('active');
            $('.donate-tab li:nth-child(3) a').trigger("click");
           // $('a.#tabD3').trigger("click");
        }
        if (tabid == "tabD4") {
           // $('.donate-tab li:nth-child(4)').toggleClass('active');
           // $('.donate-tab li:nth-child(4)').trigger("click");
            $('#tabD4').trigger("click");
        }
        if (tabid == "tabD5") {
           // $('.donate-tab li:nth-child(5)').toggleClass('active');
           // $('.donate-tab li:nth-child(5)').trigger("click");
            $('#tabD5').trigger("click");
        }

        //$('#tbd4').trigger("click");
    }

我将标签指定为tabid = "tabD4";进行测试

小提琴http://codepen.io/anon/pen/bgNRoj

Answer 1

我不是100％肯定我理解你的问题，但我认为你想通过从URL中提取查询参数来识别某个DOM元素。函数getQueryString已经完成了，我重用它作为一个非常基本的例子。这是我的解决方案：

var getQueryString = function (field, url) {
  var href = url ? url : window.location.href;
  var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
  var string = reg.exec(href);
  return string ? string[1] : null;
};

$('#extract').click(function() {
  var tabId = getQueryString($('#paramName').val(), $('#url').val());
  $('#' + tabId).toggleClass('active');
  $('#' + tabId + ' .description').toggle();
});

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="paramName" placeholder="Enter name of parameter to extract..." value="third" />
<input type="text" id="url" placeholder="Enter a test URL here..." value="http://localhost/page?first=tab1&second=tab2&third=tab3&fourth=tab4" />
<button id="extract">Go</button>

<ul>
  <li id="tab1">Tab #1
    <div class="description" style="display: none;">Here goes text #1</div>
  </li>
  <li id="tab2">Tab #2
    <div class="description" style="display: none;">Here goes text #2</div>
  </li>
  <li id="tab3">Tab #3
    <div class="description" style="display: none;">Here goes text #3</div>
  </li>
  <li id="tab4">Tab #4
    <div class="description" style="display: none;">Here goes text #4</div>
  </li>
</ul>

Answer 2

工作脚本

  var getQueryString = function (field, url) {
            var href = url ? url : window.location.href;
            var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
            var string = reg.exec(href);
            return string ? string[1] : null;
        };

        var tabid = null;
        tabid = getQueryString('tab'); // returns 'chicken'
        if (tabid !=null)
        {
            $('.donate-tab li').removeClass('active');
            $('.tab-content > .tab-pane').removeClass('active');

            if (tabid == "tabD1") {
                $('.donate-tab li:nth-child(1)').toggleClass('active');
                $('.tab-content #tabD1').toggleClass('active');
            }
            if (tabid == "tabD2") {
                $('.donate-tab li:nth-child(2)').toggleClass('active');
                $('.tab-content #tabD2').toggleClass('active');
            }
            if (tabid == "tabD3") {
                $('.donate-tab li:nth-child(3)').toggleClass('active');
                $('.tab-content #tabD3').toggleClass('active');
            }
            if (tabid == "tabD4") {
                $('.donate-tab li:nth-child(4)').toggleClass('active');
                $('.tab-content #tabD4').toggleClass('active');
            }
            if (tabid == "tabD5") {
                $('.donate-tab li:nth-child(5)').toggleClass('active');
                $('.tab-content #tabD5').toggleClass('active');
            }

        }

触发事件不会激活标签

2 个答案: