2017-05-18 4 views
0

activeクラスのnav-itemにピリオドを追加し、ナビゲーション内の別のページへのリンクをクリックすると、class="active"を移動する作業コードがあります。Javascript - アクティブリンクを変更してリンクの末尾にピリオドを追加する

現在のリンクの末尾にあるピリオドを削除し、それを新たにクリックされたアクティブリンクに移動するコードをいくつか追加する必要があります。

私は少し失われているので、誰かがこのコードで私を助けてくれますか?

参照のためにコードと画像を参照してください。

ありがとうございます!

$(document).ready(function() { 
 
\t 'use strict'; 
 
\t // SITE MENU 
 
\t // This line of code adds the period to end of link 
 
\t document.getElementById("nav-item").innerHTML += "."; 
 
\t // These lines of code move the active class when a link is clicked 
 
\t $(function() { 
 
\t \t var current_page_URL = location.href; 
 
\t \t $("a").each(function() { 
 
\t \t \t if ($(this).attr("href") !== "#") { 
 
\t \t \t \t var target_URL = $(this).prop("href"); 
 
\t \t \t \t if (target_URL == current_page_URL) { 
 
\t \t \t \t \t $('.nav a').parents('li, ul').removeClass('active'); 
 
\t \t \t \t \t $(this).parent('li').addClass('active'); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
});

enter image description here

答えて

0

これを達成するためにCSSを使用できますか? HTMLが含まれていないため、あなたのコードの構造はわかりませんが、アクティブなリンクをターゲットにできると仮定した場合、次のようなものを使用できます。

0

代わりのinnerHTMLプロパティと期間を追加するには、以下に示すように、その期間を挿入するようにCSSを使用することができます。

.active:after { 
    content: "."; 
} 

だから、いつでもアクティブクラス要素に追加され、要素の末尾にピリオドが追加されますf内容。

関連する問題