導航菜單顯示當前頁面鏈接活動 - jQuery的

我使用jQuery的手風琴插件，到目前爲止它的工作原理，但它顯示活動鏈接，但他們沒有鏈接到任何頁面，他們只是作爲編號鏈接使用定位器在同一頁面內。我怎樣才能讓它顯示當前頁面鏈接後點擊它打開一個新的頁面？導航菜單顯示當前頁面鏈接活動 - 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);

來源

2011-09-22 rolando.pdl

據我瞭解，你想真正水流nt頁面又名。活動鏈接。我可以從你的鏈接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 Plugin ..但是，我找不到該插件的直接鏈接..所以我用了一個本地的插件。您可以獲取資源中的鏈接。

實施例：http://jsfiddle.net/hobobne/qruXC/

這是概念的一個非常原始的例子。既然你提供的CSS是部分的，那麼你可以看到..它看起來不漂亮。我也是，只需將#navigation a.active {}添加到CSS。我希望你明白，可以從那裏開始。

來源

2011-09-22 17:34:27

謝謝Kalle！唯一的問題是，我需要這個工作與JavaScript，主要原因是因爲我的網站將被託管在一個.net服務器 –

然後你需要'.net'解決方案。基本方法保持不變，但PHP平臺更改爲您需要的任何平臺。理論上可能使用JavaScript來達到此目的，但不是最優的。我會給你一個工作樣本，如何可能......但我不推薦它。 –

@Rolando所以我添加了JavaScript的唯一選擇。刪除'返回false;'或鏈接不會工作。該行基本上停止超鏈接操作。 –

導航菜單顯示當前頁面鏈接活動 - jQuery的

回答

相關問題