Меню навигации, чтобы показать активную ссылку текущей страницы - jquery - PullRequest
Новая
       10

Меню навигации, чтобы показать активную ссылку текущей страницы - jquery

2 голосов
/ 22 сентября 2011

Я использую плагин jquery accordion, пока он работает правильно, но отображает активную ссылку, но они не ссылаются на какую-либо страницу, они просто используют как нумерованный локатор ссылок на той же странице. Как сделать так, чтобы ссылка на текущую страницу была активной после того, как я нажал на нее, чтобы открыть новую страницу?

Я новичок в 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);

1 Ответ

0 голосов
/ 22 сентября 2011

Как я понял, вам нужна текущая страница ака.активная ссылка.По вашим ссылкам 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 дает ей «pop».Вот как все это делают.Кроме того, лучше использовать этот метод, так как вам не нужно ждать после загрузки страницы, чтобы JS начал работать.

Альтернатива

Однако, еслиВы хотите .. Вы можете использовать JS, установив куки, каждый раз, когда пользователь нажимает на какую-то ссылку.Поэтому на следующей странице активная ссылка будет установлена ​​на основе этого значения cookie.Однако это не рекомендуется, так как это приведет к задержке и будет выглядеть в целом ... не так хорошо, как PHP и CSS.

В моем примере вы можете видеть, что я использую плагин Cookie Клауса Хартла. ОднакоЯ не смог найти прямую ссылку на этот плагин .. поэтому я использовал один из моих локальных.Вы можете получить ссылку в ресурсах.

Пример: http://jsfiddle.net/hobobne/qruXC/

Это очень грубый пример концепции.Поскольку предоставленный вами CSS является частичным, вы можете видеть ... это не выглядит красиво.Я также просто добавил #navigation a.active {} в CSS.Я надеюсь, что вы поняли идею и можете пойти оттуда.

...