Mod重写页面锚点

Question

I've been trying to solve this for the past two hours. I already tried every solution mentioned on google, but without any luck.

Let's start with the problem. I'm trying to use this plugin: http://www.gethifi.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours

on my website. The problem is that this plugin is using Anchor tags. Without it, it doesn't seem to work. Well, I'm trying to work with User Friendly URL's on the website I'm working on right now. So the anchors are not working.

This is my .htaccess file right now:

RewriteEngine On
RewriteBase /
RewriteRule ^([^/]*)\.html$ /mysite/category.php?cat=$1 [L]
RewriteRule ^([^/]*)/([^/]*)\.html$ /mysite/category.php?cat=$1&lang=$2 [L]

Nothing fancy, just some rewrites for categories and languages. The only thing that seems to work is this:

RewriteEngine On
RewriteBase /
RewriteRule ^([^/]*)\.html$ /mysite/category.php?cat=$1 [L]
RewriteRule ^([^/]*)/([^/]*)\.html$ /mysite/category.php?cat=$1&lang=$2 [NE,R,L]

But my User Friendly URL is also gone when I use this. Instead I see: category.php?cat=....

I don't know if this is important but I use <base href=""> to point to the host I'm working on.

Thanks in advance for any ideas.

Answer 1

Couldn't find a way to make the plug-in work in combination with mod_rewrite, so I just gave up and used another plug-in. It seems to work find, since it doesn't need an anchor to work with.

Peace.

Edit:

This is the code I'm using right now:

        $(document).ready(function() {

            $('.menu li a').click(function() {


                $('.menu li').removeClass('selected');
                $(this).parent('li').addClass('selected');

                thisItem    = $(this).attr('rel');

                if(thisItem != "all") {

                    $('.item li[rel='+thisItem+']').stop()
                                                            .animate({'width' : '110px', 
                                                                         'opacity' : 1, 
                                                                         'marginRight' : '.5em', 
                                                                         'marginLeft' : '.5em'
                                                                        });

                    $('.item li[rel!='+thisItem+']').stop()
                                                            .animate({'width' : 0, 
                                                                         'opacity' : 0,
                                                                         'marginRight' : 0, 
                                                                         'marginLeft' : 0
                                                                        });
                } else {

                    $('.item li').stop()
                                    .animate({'opacity' : 1, 
                                                 'width' : '110px', 
                                                 'marginRight' : '.5em', 
                                                 'marginLeft' : '.5em'
                                                });
                }
            })

            $('.item li img').animate({'opacity' : 0.5}).hover(function() {
                $(this).animate({'opacity' : 1});
            }, function() {
                $(this).animate({'opacity' : 0.5});
            });

        });

I just changed it from list to divs.