同じURLを参照するナビゲーションメニューをハイライトする方法

Question

2つの項目を持つナビゲーションメニューがあり、同じURLを参照しています。同じURLに& Page4ポイントのPage2ここ

<div id="LEFTmenu"> 
    <ul> 
    <li><a href="app/link1">Page1</a></li> 
    <li><a href="app/link2">Page2</a></li> 
    <li><a href="app/link3">Page3</a></li> 
    <li><a href="app/link2">Page4</a></li> 
    <li><a href="app/link5">Page5</a></li> 
</ul> 
</div> 

。

[更新]ユーザがページ2又はPage4に、要求が順方向リンク2の後にクリックしたときに選択したリンク/項目を強調表示する方法

。だから私はクリックイベントでこれを行うことはできませんし、イベントでpreventDefaultを使用します。

これはMVCアプリケーションであるため、要求はサーブレット（コントローラ）に送られ、JSPがレンダリングされます。したがって、Page2とPage4は同じJSPファイルを指しています。

ファイル：

nav.jsp - ナビゲーションメニュー link2.jsp - 以前のこれらの詳細を提供しないため

謝罪をLINK2する具体的な内容。

Answer 1

使用この：私は変更を表示するためにあなたのためのe.preventDefault();を使用

HTML

<div id="LEFTmenu"> 
    <ul> 
    <li><a href="app/link1">Page1</a></li> 
    <li><a href="app/link2">Page2</a></li> 
    <li><a href="app/link3">Page3</a></li> 
    <li><a href="app/link2">Page4</a></li> 
    <li><a href="app/link5">Page5</a></li> 
    </ul> 
</div> 

JS

。ここで

$('a').click(function(e){ 
    $('a').css('background-color',''); 
    e.preventDefault(); 
}); 
$('a[href="app/link2"]').click(function(e){ 
    $('a').css('background-color',''); 
    $(this).css('background-color','yellow'); 
    e.preventDefault(); 
}); 

はあなたがクリックしたリンクを強調したい場合に取り組んsolution

Answer 2

前の回答はトリックを行う必要があります。あなたが現在のアンカータグのhref属性を抽出し、それをあなたのメニューに検索することができますクリックで

$('#LEFTmenu a').click(function(e){ 
    e.preventDefault(); 
    if ($(this).attr("href") == "app/link2") { 
    $(this).css("color", "yellow"); 
    } 
}); 

Answer 3

を：しかし、あなたはちょうどそれがattrだためだけチェックし、特定のhrefでアンカーを強調したい場合。あなたも、あなたの条件にさらに一歩これを取ると、純粋なJavascriptを行く、お使いのブラウザのサポートに応じて、（IE 9は、classListをサポートしていませんでした

$(function() { 
    $('#LEFTmenu a').on('click', function(e) { 
    var $this = $(this), 
     $ul = $(this).parents('ul'), 
     href = $this.attr('href'); 
    $ul.find('a[href="'+href+'"]').css('background', 'lime'); 

    e.preventDefault(); // do not go to link 
    }); 
}); 

Working example on JS Bin

Answer 4

$(function() { 
 
    var $menuLinks = $('#LEFTmenu a'); 
 

 
    $menuLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 

 
    if ($(this).attr('href') === 'app/link2') { 
 
     $(this).addClass('highlight'); 
 
    } 
 
    
 
    $menuLinks.not(this).removeClass('highlight'); 
 
    }); 
 
});

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="LEFTmenu"> 
 
    <ul> 
 
    <li><a href="app/link1">Page1</a></li> 
 
    <li><a href="app/link2">Page2</a></li> 
 
    <li><a href="app/link3">Page3</a></li> 
 
    <li><a href="app/link2">Page4</a></li> 
 
    <li><a href="app/link5">Page5</a></li> 
 
</ul> 
 
</div>

）。巨大なパフォーマンスの違いを作るが、私はいつもとき私ができるjqueryのなしで行くのが好きではないわけではありません必要と：

if (this.getAttribute('href') === 'app/link2') { 
    this.classList.add('highlight'); 
} 

UPDATE：

はここで上記1 alternativethanより良い、よりダイナミックです。ここでは、すべてを除いてをクリックして、some()を使用してループしています。現在のクリックしたリンクと一致するものがあれば、trueまたはfalseのいずれかを返します。我々は、我々はこれが同じターゲットとのリンクをハイライト表示しませんリンクに

$(function() { 
 
    var $menuLinks = $('#LEFTmenu a'); 
 

 
    $menuLinks.on('click', function(e) { 
 
    e.preventDefault(); 
 
    
 
    var that = this; 
 
    
 
    var linkHasDuplicate = [].some.call($menuLinks.not(this), function(elem) { 
 
     return elem.getAttribute('href') === that.getAttribute('href'); 
 
    }); 
 
    
 
    if (linkHasDuplicate) { 
 
     $(this).addClass('highlight'); 
 
    } 
 
    
 
    $menuLinks.not(this).removeClass('highlight'); 
 
    }); 
 
});

.highlight { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="LEFTmenu"> 
 
    <ul> 
 
    <li><a href="app/link1">Page1</a></li> 
 
    <li><a href="app/link2">Page2</a></li> 
 
    <li><a href="app/link3">Page3</a></li> 
 
    <li><a href="app/link2">Page4</a></li> 
 
    <li><a href="app/link5">Page5</a></li> 
 
</ul> 
 
</div>