Navigation menu to show current page link active - jquery_问答_开发者

I'm using the jquery accordion plugin, so far it works right but it displays the active link but they are not linking to any page, they are just using as a numbered link locator inside the same page. How can I make it to show the current page link active after I have clicked on it to open a new page?

I'm new to JQuery and really need this to work. Please help!

Here is the HTM, if you see the code youll find for example sub1 but how can I use a real page link and preserve de same link active state through the website

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>Accordion Test</title>

    <link rel="stylesheet" href="accordionDemo.css" />
    <script src="http://www.google.com/jsapi" type="text/javascript"></script> 
    <script type="text/javascript">google.load("jquery", "1");</script>
    <script type="text/javascript" src="../js/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="../js/jquery.easing.js"></script>
    <script type="text/javascript" src="../js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="../js//jquery.accordion.js"></script>

    <script type="text/javascript">
    jQuery().ready(function(){
        // simple accordion with mouseover event
        jQuery('#navigation').accordion
        ({
            active: false,
            header: '.head',
            navigation: true,
            event: 'mouseover',
            fillSpace: true,
            animated: 'easeslide'
        });
    });
    </script>
</head>
<body>

<div id="wrapper">


<div id="navBar">
            <ul id="navigation">
                <li>
                    <a class="head" href="?p=1">About SfT</a>
                    <ul>
                        <li><a href="?p=1.1">sub1</a></li>
                        <li><a href="?p=1.2">sub2</a></li>
                        <li><a href="?p=1.3">sub3</a></li>
                        <li><a href="?p=1.4.1">sub4</a></li>
                        <li><a href="?p=1.4.2">sub4.1</a></li>
                        <li><a href="?p=1.4.3">sub4.2</a></li>
                    </ul> 
                </li>
                <li>
                    <a class="head" href="?p=1.2">Your Life</a>
                    <ul>
                        <li><a href="?p=1.2.1">sub1</a></li>
                        <li><a href="?p=1.2.2">sub2</a></li>
                        <li><a href="?p=1.2.3">sub3</a></li>
                        <li><a href="?p=1.2.4">sub4</a></li>
                        <li><a href="?p=1.2.5">sub5</a></li>
                    </ul> 
                </li>
            </ul>
        </div>
        </div> <!--end wrapper-->
    </body>
</html>

The CSS

* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; font-size: small; color: #333 }
#wrapper {
    width:600px;
    margin:0 auto;
    padding-top:100px;
    }
#navBar { 开发者_如何学JAVA
    height:330px;
    margin-bottom:1em;
}
#navigation {
    margin:0px;
    padding:0px;
    text-indent:0px;
    /*background-color:#EFEFEF;  sublists background color */
    width:200px;
}
#navigation a.head { /* list header */
    height: 40px;
    cursor:pointer;
    background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */
    color:#999;
    display:block;
    font-weight:bold;
    font-size: 22px;
    margin:0px;
    padding:0px;
    text-indent:20px;
    text-decoration: none;
}
#navigation a.head:hover {
    color:#900;
}
#navigation a.selected {
    background-image: url(expanded.gif);
    color:#900;
}
#navigation a.current {
    color: #F60;;
    font-weight:bold;
}
#navigation ul {
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li {
    list-style:none outside none; 
    /*display:inline;*/
    padding:5px 0 5px 0;
    height:0 auto;
}
#navigation li li a {
    color:#000000;
    display:block;
    font-size:16px;
    text-indent:20px;
    text-decoration: none;
}
#navigation li li a:hover { /* sublist hover state bg and color */
    color:#F60;;
    font-weight:bold;
}

And the jquery.accordion.js code

/*
 * jQuery UI Accordion 1.6
 * 
 * Copyright (c) 2007 Jörn Zaefferer
 *
 * http://docs.jquery.com/UI/Accordion
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 *
 * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
 *
 */

;(function($) {

// If the UI scope is not available, add it
$.ui = $.ui || {};

$.fn.extend({
    accordion: function(options, data) {
        var args = Array.prototype.slice.call(arguments, 1);

        return this.each(function() {
            if (typeof options == "string") {
                var accordion = $.data(this, "ui-accordion");
                accordion[options].apply(accordion, args);
            // INIT with optional options
            } else if (!$(this).is(".ui-accordion"))
                $.data(this, "ui-accordion", new $.ui.accordion(this, options));
        });
    },
    // deprecated, use accordion("activate", index) instead
    activate: function(index) {
        return this.accordion("activate", index);
    }
});

$.ui.accordion = function(container, options) {

    // setup configuration
    this.options = options = $.extend({}, $.ui.accordion.defaults, options);
    this.element = container;

    $(container).addClass("ui-accordion");

    if ( options.navigation ) {
        var current = $(container).find("a").filter(options.navigationFilter);
        if ( current.length ) {
            if ( current.filter(options.header).length ) {
                options.active = current;
            } else {
                options.active = current.parent().parent().prev();
                current.addClass("current");
            }
        }
    }

    // calculate active if not specified, using the first header
    options.headers = $(container).find(options.header);
    options.active = findActive(options.headers, options.active);

    if ( options.fillSpace ) {
        var maxHeight = $(container).parent().height();
        options.headers.each(function() {
            maxHeight -= $(this).outerHeight();
        });
        var maxPadding = 0;
        options.headers.next().each(function() {
            maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
        }).height(maxHeight - maxPadding);
    } else if ( options.autoheight ) {
        var maxHeight = 0;
        options.headers.next().each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        }).height(maxHeight);
    }

    options.headers
        .not(options.active || "")
        .next()
        .hide();
    options.active.parent().andSelf().addClass(options.selectedClass);

    if (options.event)
        $(container).bind((options.event) + ".ui-accordion", clickHandler);
};

$.ui.accordion.prototype = {
    activate: function(index) {
        // call clickHandler with custom event
        clickHandler.call(this.element, {
            target: findActive( this.options.headers, index )[0]
        });
    },

    enable: function() {
        this.options.disabled = false;
    },
    disable: function() {
        this.options.disabled = true;
    },
    destroy: function() {
        this.options.headers.next().css("display", "");
        if ( this.options.fillSpace || this.options.autoheight ) {
            this.options.headers.next().css("height", "");
        }
        $.removeData(this.element, "ui-accordion");
        $(this.element).removeClass("ui-accordion").unbind(".ui-accordion");
    }
}

function scopeCallback(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    };
}

function completed(cancel) {
    // if removed while animated data can be empty
    if (!$.data(this, "ui-accordion"))
        return;
    var instance = $.data(this, "ui-accordion");
    var options = instance.options;
    options.running = cancel ? 0 : --options.running;
    if ( options.running )
        return;
    if ( options.clearStyle ) {
        options.toShow.add(options.toHide).css({
            height: "",
            overflow: ""
        });
    }
    $(this).triggerHandler("change.ui-accordion", [options.data], options.change);
}

function toggle(toShow, toHide, data, clickedActive, down) {
    var options = $.data(this, "ui-accordion").options;
    options.toShow = toShow;
    options.toHide = toHide;
    options.data = data;
    var complete = scopeCallback(completed, this);

    // count elements to animate
    options.running = toHide.size() == 0 ? toShow.size() : toHide.size();

    if ( options.animated ) {
        if ( !options.alwaysOpen && clickedActive ) {
            $.ui.accordion.animations[options.animated]({
                toShow: jQuery([]),
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        } else {
            $.ui.accordion.animations[options.animated]({
                toShow: toShow,
                toHide: toHide,
                complete: complete,
                down: down,
                autoheight: options.autoheight
            });
        }
    } else {
        if ( !options.alwaysOpen && clickedActive ) {
            toShow.toggle();
        } else {
            toHide.hide();
            toShow.show();
        }
        complete(true);
    }
}

function clickHandler(event) {
    var options = $.data(this, "ui-accordion").options;
    if (options.disabled)
        return false;

    // called only when using activate(false) to close all parts programmatically
    if ( !event.target && !options.alwaysOpen ) {
        options.active.parent().andSelf().toggleClass(options.selectedClass);
        var toHide = options.active.next(),
            data = {
                instance: this,
                options: options,
                newHeader: jQuery([]),
                oldHeader: options.active,
                newContent: jQuery([]),
                oldContent: toHide
            },
            toShow = options.active = $([]);
        toggle.call(this, toShow, toHide, data );
        return false;
    }
    // get the click target
    var clicked = $(event.target);

    // due to the event delegation model, we have to check if one
    // of the parent elements is our actual header, and find that
    if ( clicked.parents(options.header).length )
        while ( !clicked.is(options.header) )
            clicked = clicked.parent();

    var clickedActive = clicked[0] == options.active[0];

    // if animations are still active, or the active header is the target, ignore click
    if (options.running || (options.alwaysOpen && clickedActive))
        return false;
    if (!clicked.is(options.header))
        return;

    // switch classes
    options.active.parent().andSelf().toggleClass(options.selectedClass);
    if ( !clickedActive ) {
        clicked.parent().andSelf().addClass(options.selectedClass);
    }

    // find elements to show and hide
    var toShow = clicked.next(),
        toHide = options.active.next(),
        //data = [clicked, options.active, toShow, toHide],
        data = {
            instance: this,
            options: options,
            newHeader: clicked,
            oldHeader: options.active,
            newContent: toShow,
            oldContent: toHide
        },
        down = options.headers.index( options.active[0] ) > options.headers.index( clicked[0] );

    options.active = clickedActive ? $([]) : clicked;
    toggle.call(this, toShow, toHide, data, clickedActive, down );

    return false;
};

function findActive(headers, selector) {
    return selector != undefined
        ? typeof selector == "number"
            ? headers.filter(":eq(" + selector + ")")
            : headers.not(headers.not(selector))
        : selector === false
            ? $([])
            : headers.filter(":eq(0)");
}

$.extend($.ui.accordion, {
    defaults: {
        selectedClass: "selected",
        alwaysOpen: true,
        animated: 'slide',
        event: "click",
        header: "a",
        autoheight: true,
        running: 0,
        navigationFilter: function() {
            return this.href.toLowerCase() == location.href.toLowerCase();
        }
    },
    animations: {
        slide: function(options, additions) {
            options = $.extend({
                easing: "swing",
                duration: 300
            }, options, additions);
            if ( !options.toHide.size() ) {
                options.toShow.animate({height: "show"}, options);
                return;
            }
            var hideHeight = options.toHide.height(),
                showHeight = options.toShow.height(),
                difference = showHeight / hideHeight;
            options.toShow.css({ height: 0, overflow: 'hidden' }).show();
            options.toHide.filter(":hidden").each(options.complete).end().filter(":visible").animate({height:"hide"},{
                step: function(now) {
                    var current = (hideHeight - now) * difference;
                    if ($.browser.msie || $.browser.opera) {
                        current = Math.ceil(current);
                    }
                    options.toShow.height( current );
                },
                duration: options.duration,
                easing: options.easing,
                complete: function() {
                    if ( !options.autoheight ) {
                        options.toShow.css("height", "auto");
                    }
                    options.complete();
                }
            });
        },
        bounceslide: function(options) {
            this.slide(options, {
                easing: options.down ? "bounceout" : "swing",
                duration: options.down ? 1000 : 200
            });
        },
        easeslide: function(options) {
            this.slide(options, {
                easing: "easeinout",
                duration: 700
            })
        }
    }
});

})(jQuery);

As I understand, you want the current page aka. the active link. I can see from your links href="" that you are using PHP platform for displaying the pages, not JS. So in that case, this has basically nothing to do with JS and most of your provided scripts are irrelevant.

You want to do this with PHP and CSS. So basically, if you are using CMS type of software, while generating the menu.. you want to match the menus pageid with current pageid, inside the menu generating loop.

So the basic idea behind the loop is something like this:

foreach ($menus as $menu) {
    echo '<a href="?p=' . $menu['pageid'] . '"' . ($menu['pageid'] == $pageid ? ' class="active"' : '') . '>' . $menu['title'] . '</a>';
}

So, the active link is being set via PHP and CSS gives it "pop". This is how everybody does it. Also, better to use this method, as you don't have to wait after the page load, so the JS would start working.

Alternative

However, if you want to.. You can use JS by setting a cookie, everytime user clicks on some link. So next page the active link will be set based on that cookie value. However, this is not recommended, as it will cause lag and will look overall.. not as good as PHP and CSS.

In my example, you can see I'm using Klaus Hartl's Cookie Plugin.. However, I couldn't find a direct link to that plugin.. so I used one of my local ones. You can get the link in the resources.

Example: http://jsfiddle.net/hobobne/qruXC/

This is a very raw example of the concept. Since your provided CSS is partial, then you can see.. it doesn't look pretty. I also, simply added the #navigation a.active {} to the CSS. I hope you get the idea and can go from there.