Фильтруемое портфолио Hashtag

Question

Я работаю с фильтруемым портфолио. У меня есть небольшая проблема со ссылками для фильтрации портфеля.

Когда я нажимаю на кнопки, он правильно фильтрует портфолио, но после этого он автоматически подключается к сайту, например xy.com/#myfilter, и пытается его открыть.

Возможно, у вас есть идея, как отключить это?

LINK SAMPLE:

<a href="#design" rel="design">Design</a> 

ИС-FILE заключается в следующем:

(function($) { 
    $.fn.filterable = function(settings) { 
    settings = $.extend({ 
     useHash   : true, 
     animationSpeed : 500, 
     show    : { width: 'show', opacity: 'show' }, 
     hide    : { width: 'hide', opacity: 'hide' }, 
     useTags   : true, 
     tagSelector  : '#portfolio-filter a', 
     selectedTagClass : 'current', 
     allTag   : 'all' 
    }, settings); 

    return $(this).each(function(){ 

     /* FILTER: select a tag and filter */ 
     $(this).bind("filter", function(e, tagToShow){ 
     if(settings.useTags){ 
      $(settings.tagSelector) 
      .removeClass(settings.selectedTagClass); 
      $(settings.tagSelector + '[href=' + tagToShow + ']') 
      .addClass(settings.selectedTagClass); 
     } 

     $(this).trigger("filterportfolio", [ tagToShow.substr(1) ]); 
     }); 

     /* FILTERPORTFOLIO: pass in a class to show, all others will be hidden */ 
     $(this).bind("filterportfolio", function(e, classToShow){ 
     if(classToShow == settings.allTag){ 
      $(this).trigger("show"); 
     }else{ 
      $(this).trigger("show", [ '.' + classToShow ]); 
      $(this).trigger("hide", [ ':not(.' + classToShow + ')' ]); 
     } 

     if(settings.useHash){ 
      location.hash = '#' + classToShow; 
     } 
     }); 

     /* SHOW: show a single class*/ 
     $(this).bind("show", function(e, selectorToShow){ 
     $(this) 
      .children(selectorToShow) 
      .animate(settings.show, settings.animationSpeed); 
     }); 

     /* SHOW: hide a single class*/ 
     $(this).bind("hide", function(e, selectorToHide){ 
     $(this) 
      .children(selectorToHide) 
      .animate(settings.hide, settings.animationSpeed); 
     }); 

     /* ============ Check URL Hash ====================*/ 
     if(settings.useHash){ 
     if(location.hash != '') { 
      $(this).trigger("filter", [ location.hash ]); 
     }else{ 
      $(this).trigger("filter", [ '#' + settings.allTag ]); 
     } 

     /* ============ Setup Tags ====================*/ 
     if(settings.useTags){ 
      $(settings.tagSelector).click(function(){ 
      $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]); 
      $(settings.tagSelector).removeClass('current'); 
      $(this).addClass('current'); 
      }); 
     } 
     }); 
    } 
})(jQuery); 


$(document).ready(function(){ 

    $('#portfolio-list').filterable(); 

}); 

Может быть также, что у меня есть проблемы с моим поиска дружественных URLS? Большое спасибо за любую помощь.

С уважением.

Answer 1

Вам необходимо внести некоторые коррективы в случае щелчка:

В текущей функции мыши:

$(settings.tagSelector).click(function(){ 
    $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]); 

    $(settings.tagSelector).removeClass('current'); 
    $(this).addClass('current'); 
}); 

изменить его на:

$(settings.tagSelector).click(function(event){ 
    $('#portfolio-list').trigger("filter", [ $(this).attr('href') ]); 

    $(settings.tagSelector).removeClass('current'); 
    $(this).addClass('current'); 

    // push the hash into the url 
    location.hash = $(this).attr('href'); 

    // stop the regular href 
    event.preventDefault(); 
}); 

Это позволяет для размещения хеш-значения в URL-адресе, но не позволяйте браузеру фактически перезагрузить pa ge с этим хешем, когда пользователь нажимает на ссылку!

---

Подробнее об этом:

event.preventDefault() | location.hash