Question

我正在尝试根据网址末尾的内容选择一个活动标签。

然后获取选项卡值并使脚本将该选项卡显示为活动状态。我无法让它发挥作用。任何帮助都会很棒。

这是JavaScript：

$(document).ready(function() {

    //Default Action
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    var activeTab = $(this).find("a").attr("href"); //Find the real attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content

    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
        var activeTab = $(this).find("a").attr("href"); //Find the real attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
    });

});

这是HTML：

<div class="container">
<ul class="tabs">
<li><a href="#tab1">Current Events</a></li>
<li><a href="#tab2">Add New Event</a></li>
<li><a href="#tab3">Upcoming Events</a></li>
<li><a href="#tab4">Past Events</a></li>
</ul>
<div class="tab_container">

<div id="tab1" class="tab_content">
<h2>Current Events for $today</h2>

</div> 

<div id="tab2" class="tab_content">
<h2>Add New Event</h2>

</div> 

<div id="tab3" class="tab_content">
<h2>Upcoming Events</h2>

</div> 

<div id="tab4" class="tab_content">
<h2>Past Events</h2>

</div> 

</div> 
</div>

当然有一些CSS和其他东西所以请不要指出这个大声笑。我只是想让java脚本获取$ tab = _ $ GET ['tab'];并使该标签可见。

所以我真正需要的是重写JavaScript以使其工作。

Answer 1

或者使用hashtags表示js版本，或者使用PHP将$_GET['tab']传递给js脚本。
在这种情况下，人们通常会使用hashtags。

在第一种情况下，您必须使用hashtags并使您的网址如下所示：http://example.com/#tab1并添加您的js接受这些hashtag：

var hash = window.location.hash;

在第二种情况下，您应该使用PHP将选项卡值传递给JS，并且您的js代码将如下所示：

var currentTab = <?=$_GET['tab']?>;

在php中从URL中选择一个选项卡

1 个答案: