1

您好我正在尝试使用这个名为“Filterable Portfolio”的脚本，但它使用哈希并且我的网站已经使用了一个，当我尝试加载哈希时它会产生冲突，有没有办法使用两个哈希？

我的页面示例是

mysite.com#portfolio.php

可过滤的投资组合使用#example

如果我把

mysite.com#example

不工作它需要是这样的。

mysite.com#portfolio.php#example

这是Filterable投资组合的JS

/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
*/

(function($) {
  $.fn.filterable = function(settings) {
      settings = $.extend({
          useHash: true,
          animationSpeed: 1000,
          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 = '#{key}=#{value}' + 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();

});

这是页面的导航。

<div class="wrapper" id="contentWrapper"> <div class="boundingBox" id="content">      <ul id="portfolio-filter">
          <li><a href="#0" title="" rel="0">#</a></li>
          <li><a href="#portfolio.php#a" title="" rel="a">A</a></li>
          <li><a href="#portfolio.php#b" title="" rel="b">B</a></li>
          <li><a href="#portfolio.php#c" title="" rel="c">C</a></li>
      </ul></p>


<ul id="portfolio-list">  <div id="a"> content A</div>  <div id="b"> content B</div> <div id="c"> content C</div>  </ul>
4

0 回答 0