Question

我们在网站上使用jquery标签，标签可以在http://www.wirenine.com/web-hosting/

看到

我们希望能够使用URL中的#faq之类的某种锚来加载辅助选项卡，以便在页面加载时默认加载辅助选项卡。怎么能实现这一目标？标签JS代码可以在

看到

http://cdn.wirenine.com/js/tabs.js

    //<![CDATA[ 
$(window).load(function(){
function displayPage(e) {
    var current = $(this).parent().attr("data-current");
    $("#tabHeader_" + current).removeClass("tabActiveHeader")
    $("#tabpage_" + current).hide();

    var ident = this.id.split("_")[1];
    $(this).addClass("tabActiveHeader");
    $("#tabpage_" + ident).show();
    $(this).parent().attr({ 'data-current': ident })
}
$(function() {
    var container = $("#tabContainer"),
        navitem = container.find((".tabs ul li")).first(),
        ident = navitem[0].id.split("_")[1];
    navitem.addClass("tabActiveHeader").parent().attr({ 'data-current': ident });

    $(".tabpage").filter(function(i) { return i>0; }).hide();
    // OR
    // $(".tabpage:not(:first-child)").hide();

    $(".tabs ul li").on("click", displayPage)
});
});//]]>

Answer 1

$(function(){
    var targetTab = location.hash.replace(/#/, '');
    $("li[id$='" + targetTab + "']").click();
});

您可以将tabHeader listItems上的ID的数字部分替换为tabHeader_faqs，tabHeader_plans之类的名称，它应该有效。

Answer 2

checkTab函数检查添加的值是否在url中。如果是，Tab 5将显示display：block;在css。因此，选项卡始终位于您的页面上，但仅显示添加的值（checkTab（value））是否在URL中。

HTML

<li id="tabHeader_5">
    <span>faq</span>
</li>

<div class="tabpage" id="tabpage_5">
    Faq
</div>

CSS

#tabHeader_5{
    display: none;
}

JQuery的

$(window).load(function(){
function displayPage(e) {

 checkTab('#faq');
 var current = $(this).parent().attr("data-current");
$("#tabHeader_" + current).removeClass("tabActiveHeader")
$("#tabpage_" + current).hide();

var ident = this.id.split("_")[1];
$(this).addClass("tabActiveHeader");
$("#tabpage_" + ident).show();
$(this).parent().attr({ 'data-current': ident })
 }
 $(function() {
    var container = $("#tabContainer"),
    navitem = container.find((".tabs ul li")).first(),
    ident = navitem[0].id.split("_")[1];
    navitem.addClass("tabActiveHeader").parent().attr({ 'data-current': ident });

$(".tabpage").filter(function(i) { return i>0; }).hide();
// OR
// $(".tabpage:not(:first-child)").hide();

$(".tabs ul li").on("click", displayPage)
});
});

function checkTab(value)
{

    var tabUrl = href.toString().toLowerCase();

    if (tabUrl.indexOf(value) >= 0) {
        $('#tabHeader_5').show();
    }



}

//]]>

Answer 3

您只需在您的网址GET参数中插入：

http://www.wirenine.com/web-hosting/?tab=faq

此页面必须是动态的，由php或asp生成。

示例PHP：

 <li id="tabHeader_1" <?php if($_GET['tab'] == 'plans') echo 'class="tabActiveHeader"'; ?> ><span>Plans &amp; Features</span></li>
        <li id="tabHeader_2" <?php if($_GET['tab'] == 'compare') echo 'class="tabActiveHeader"'; ?>><span>Compare All Plans</span></li>
        <li id="tabHeader_3" <?php if($_GET['tab'] == 'faq') echo 'class="tabActiveHeader"'; ?>><span>FAQ's</span></li>
        <li id="tabHeader_4" <?php if($_GET['tab'] == 'competition') echo 'class="tabActiveHeader"'; ?>><span>WireNine vs The Competition</span></li>

我认为你有了这个主意。

如何使用带锚的URL加载jquery Tab

3 个答案:

HTML

CSS

JQuery的