Вопросы Теги

Как я заставляю ссылку открывать определенную вкладку на странице?

Я работаю над сайтом для клиента, который имеет jQuery управляемое снабженное вкладками содержание.

Соединение с корректной страницей достаточно легко, но проблема состоит в том, чтобы открыться к корректной вкладке, когда Вы добираетесь там. На о странице прокручивают к нижней части и нажимают в движении его значок (тот с грузовиком). Это берет Вас к перемещению это страница. Это хорошо работает, но я хотел бы, чтобы это смогло открыть вкладку Specialty.

Вот код, который связывается со страницей:

  • Move It
    •

    Я попробовал это, но это не работает правильно

  • Move It
    •

    Вот код для вкладок на целевой странице:

    
   
    Moving Simplified specializes in moving items such items as pool tables, pianos, antiques, and anything else you can throw at us.
     
   
    
    Watch the Move It Specialty Videos Now.
   
    
   
      Moving such items is more complicated than most would understand, and is an art form in itself.  We take pride in making sure that your priceless possessions are delivered damage free.  The employees sent to move your belongings are highly experienced in these types of items.  They will always  be well equipped to complete the move with the most up to date technology in the moving industry.
     We will always pad and wrap each individual piece, as well as provide custom crates to ensure the safety of your pool table slate.
    
   
    
     
    Want to download the Move It Specialty guide? Go here now.

    Вот jQuery для работы вкладками:

    $(document).ready(function() {
/* this is for the tabbed content */
$("a.tab").click(function( evt ) {
    evt.preventDefault();
    $(".active").removeClass("active");
    $(this).addClass("active");
    $(".content").slideUp();

    var content_show = $(this).attr("id");
    $("#" + content_show + '-content').slideDown();
});

    Поскольку я должен буду сделать это на нескольких комбинациях ссылки/вкладки, я хотел бы найти систематический подход.

    Спасибо за любую справку!

    10
    задан fmz 12 August 2010 в 16:30
    поделиться

    3 ответа

    Это легко реализовать с помощью подключаемых модулей jQuery от Ariel Flesler вместе со стандартным виджетом jQuery UI Tabs:

    Вы найдете подробную информацию " как "в записи блога по адресу:

    http://weblog.muledesign.com/2009/05/bookmarkable_tabs_with_jquery_ui.php

    Этот подход требует минимального количества кода и может быть распространен на все ваши страницы.

    Сначала настройте вкладки с помощью виджета jQuery UI Tabs.

    Включите плагины jQuery на страницах, использующих вкладки: 

    <script src="/javascripts/jquery.localscroll.js?1281125099" type="text/javascript"></script>
<script src="/javascripts/jquery.scrollTo.js?1281125099" type="text/javascript"></script>

    Затем добавьте это (заменив любой div, который вы используете, на "#tabs"): 

    $(document).ready(function() {
  if($("#tabs") && document.location.hash){
    $.scrollTo("#tabs");
  }
  $("#tabs ul").localScroll({ 
    target:"#tabs",
    duration:0,
    hash:true
  });
});

    И все!

    8
    ответ дан 4 December 2019 в 01:55
    поделиться

    Мне нужен JS код для обработки хешпартов. Это может выглядеть примерно так. 

    handleHashPart = function(tabs) {
  var hashPart = window.location.hash;
  if (! hashPart || hashPart.length === 0) {
    return;
  }
  tabs.each(function() {
    var link = $(this);
    if (link.attr('href') == hashPart) {
      link.trigger('click');
      return false;
    }
    return true;
  });
};

handleHashPart($('a.tab'));

    Поместите это после прикрепления обработчика. Теперь ваша ссылка должна работать.

    0
    ответ дан 4 December 2019 в 01:55
    поделиться

    Недавно я пытался создать свои собственные вкладки. Я изменил код в соответствии с вашими потребностями, но я не уверен, работает ли он:

    Убедитесь, что идентификатор вашей ссылки - это то же самое, что вы поставили после # 

    var curtab = window.location.href; // Get the url
    curtab = curtab.split("#"); // Split the url at #
    curtab = "#" + curtab[1]; // Put the info after the # in a variable

    $("a.tab").each(function(i){ // Loop through all links and compare tab from url with value in link
        if(curtab == $(this).attr("href")){
            $(this).addClass("active"); // If they are the same, set that tab's class to active
        }
    });

$("a.tab").click(function(){ // Select tab
        $(".active").removeClass("active"); // Select the a, remove class for every link
        $(this).addClass("active"); // Select the clicked tab and add an active class
        var tabtocall = $(this).children().attr("href"); // Var to select current clicked tab
        $(".content").slideUp; // Slide up all content
        $(tabtocall).slideDown("normal"); // Slide down the selected content
    });

    Надеюсь, это поможет!

    Изменить:

    Код ниже предназначен для установки активной ссылки на вкладку (см. Комментарий) в зависимости от вашей структуры. 

        $(".tabs a").each(function(i){ // Loop through all the links
        if(curtab == $(this).attr("id")){ // Compare the value from the url with the id
            $(this).addClass("active"); // If equal add class active
        }
    });
    1
    ответ дан 4 December 2019 в 01:55
    поделиться
    Другие вопросы по тегам:

    Похожие вопросы: