显示当前页面链接活动的导航菜单 - jquery

发布于 2024-12-06 04:11:28 字数 14500 浏览 0 评论 0原文

我正在使用 jquery 手风琴插件，到目前为止它工作正常，但它显示活动链接，但它们没有链接到任何页面，它们只是用作同一页面内的编号链接定位器。单击打开新页面后如何使其显示当前页面链接处于活动状态？

我是 JQuery 新手，确实需要它才能工作。请帮忙！

这是 HTM，如果您看到代码，您会发现例如 sub1，但是我如何使用真实的页面链接并通过网站保留相同的链接活动状态

<!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>

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 { 
    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;
}

和 jquery.accordion.js 代码

/*
 * 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);

原文

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 { 
    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);

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

可遇━不可求 2024-12-13 04:11:28

据我了解，您想要当前页面。活动链接。我从您的链接 href="" 中可以看到您正在使用 PHP 平台来显示页面，而不是 JS。所以在这种情况下，这基本上与 JS 无关，并且您提供的大多数脚本都是不相关的。

您想使用 PHP 和 CSS 来完成此操作。所以基本上，如果您使用 CMS 类型的软件，在生成菜单时..您希望在菜单生成循环内将菜单 pageid 与当前 pageid 相匹配。

因此，循环背后的基本思想是这样的：

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

因此，活动链接是通过 PHP 设置的，CSS 赋予它“弹出”。每个人都是这样做的。另外，最好使用这种方法，因为您不必在页面加载后等待，因此 JS 就会开始工作。

替代

但是，如果你想..你可以通过设置cookie来使用JS，每次用户点击某个链接时。因此，下一页将根据该 cookie 值设置活动链接。但是，不建议这样做，因为它会导致延迟，而且整体看起来会不如 PHP 和 CSS。

在我的示例中，您可以看到我正在使用 Klaus Hartl 的 Cookie 插件。但是，我找不到该插件的直接链接。所以我使用了本地插件之一。您可以在资源中获取链接。

示例：http://jsfiddle.net/hobobne/qruXC/

这个这是这个概念的一个非常原始的例子。由于您提供的 CSS 是部分的，那么您可以看到..它看起来不太漂亮。我还简单地将 #navigation a.active {} 添加到 CSS 中。我希望你能明白这个想法并可以从那里开始。

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.

回复收藏 0 原文

~没有更多了~