вкладки jquery, видимые по URL

Question

Я использую jquery и вкладки на основе http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

<script type="text/javascript">
    $(function() {
        $(".tab_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("active").show(); //Activate first tab
        $(".tab_content:first").show(); //Show first tab content

        //On Click Event
        $("ul#menu li").click(function() {
        $("ul#menu 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 rel attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active content
        return false;
        });
    });
</script>

Можно ли настроить это так, чтобы в зависимости от значения в URL (page.html # tab4 и т. Д.) Вкладка-ответчикshow?

Я верю, что в его текущем состоянии он не работает, потому что возвращает false, и что

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

ищет значение привязки, а не URL.

Надеюсь, что это имеет смысл.

Я (думаю), если исправление возможно, мне нужен способ получить #tab из URL-адреса, а также на основе нажатой привязки.

Спасибо

Answer 1

Вы можете использовать window.location.hash для получения части #something URL. Смотри: https://developer.mozilla.org/en/window.location

---

Кроме того, код, который вы опубликовали ..., вероятно, является отличным списком того, что не нужно делать в jQuery. Давайте исправим это для вас:

$(function() {
    var tabContent = $(".tab_content");
    // Modified tutorial's code for this
    var tabs = $("#menu li");
    var hash = window.location.hash;

    tabContent.not(hash).hide();
    tabs.find('[href=' + hash + ']').addClass('active');

    tabs.click(function() {
        $(this).addClass('active').siblings().removeClass('active');
        tabContent.hide();
        var activeTab = $(this).find("a").attr("href");

        $(activeTab).fadeIn();
        return false;
    });
});

Answer 2

Хотите ли вы отобразить вкладку загрузки страницы?

 $(function() {
      $("ul#menu li").removeClass("active"); //Remove any "active" class  
      $(".tab_content").hide(); //Hide all tab content  

      // set the active class on the tab where the href ends with #tabN
      $("ul#menu li a[href$='" + window.location.hash + "]").closest("li").addClass("active");
      // use the #tabN part of the url as the id selector to show the content
      $(window.location.hash).fadeIn();
 });

Кроме того, в вашем обработчике onclick вы, вероятно, хотите заменить строку

    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 

на

    var activeTab = $(this).find("a")[0].hash; //Find the rel attribute value to identify the active tab + content 

, чтобы получить #tabN часть href.

Answer 3

да попробуй:

$('a[href="'+activeTab'"]').fadeIn();