3

メニュー項目の に従ってアクティブなメニュー項目にJQueryを追加するために、次のコードを使用しています。class nameURL

var aurl = window.location.pathname;
$('.menu li a[href="'+aurl+'"]').parent('li').addClass('active');

問題はコード自体にあるのではなく、window.location.pathname.

URL次のHTMLコードとして設定すると機能します。

<ul>
  <li><a href='/'>home</a></li>
  <li><a href='/page1'>page 1</a></li>
  <li><a href='/page%202'>page 2</li>
</ul>

URLしかし、次のHTMLコードとして設定すると機能しません。

<ul>
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
</ul>

代わりにwindow.location.pathname、これらすべてのケースをまとめて識別できるものが必要です。

ありがとうございました

更新 #1:

私はこのように2つの変数を使用しましたURL:

var aurl = window.location;
var burl = window.location.pathname;
$('.menu li a[href="'+aurl+'"],.menu li a[href="'+burl+'"]').parent('li').addClass('active');

それはすべてのタイプで機能しましたが、まだ定義できません。次のようURLにspace置き換える必要があります。%20

<li><a href='/page 2'>page 2</li>

することが：

<li><a href='/page%202'>page 2</li>
4

4 に答える 4

0

ブラウザの URL が li>a child href と等しい場合、アクティブなクラスを li タグに追加しようとしていると思います。これが必要な場合は、ここで簡単な解決策を示します。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>

<ul id="menu">
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
  <li><a href="test.html">test</a></li>
</ul>

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu a").click(function(){
            var browserUrl = window.location.href;
            var myUrl = $(this).attr('href');
            alert(browserUrl);
            alert(myUrl);
            if(browserUrl === myUrl ){
                $(this).parent().addClass('active');
            }

        return false; // to prevent the default behavior of the a tag when clicked
        });
    });
</script>
</body>
</html>
于 2015-03-02T16:01:56.530 に答える
0

window.location相対 URL と絶対 URL の両方を識別したい場合、両方に一致する単一のコンポーネントはないと思います。jQueryセレクターのページを見てください。サイトの構造によっては、「属性で終わる」セレクターを使用できます[name$="value"]。

var aurl = window.location.pathname;
$('.menu li a[href$="'+aurl+'"]').parent('li').addClass('active');
于 2015-03-02T15:40:34.433 に答える