メニューの強調表示_JavaScript スキルを実装するための 2 つの単純な JS コード

静的ページを作成していたとき、強調表示を実現するために各ページに異なるスタイルを追加したことを思い出しました。強調表示は Web フロントエンドでよく使用される効果だと思いますが、今回もそれを特別に整理しました。

実際、最初の方法は、リンク グループの href 値を走査し、indexOf を使用して、href 値が現在の URL に含まれているかどうかを判断することです。たとえば、この方法では iframe 内のメニューを判断できませんが、実装のアイデアは比較的単純です。クリックすると、クリックされた項目が強調表示スタイルで読み込まれます。

現在の URL 値を強調表示する最初のタイプのコード:

コードをコピーします コードは次のとおりです。

//@Mr.Think---メニューの強調表示を実装する URL を決定します。
function highURL(menuId,classCur){
if(!document.getElementById) return false;
if (!document.getElementById(menuId)) return false;
if(!document.getElementsByTagName) return false; getElementById(menuId);
var links=menuId.getElementsByTagName("a ");
for(var i=0; ivar menuLink=links[i]。 href;
var currentLink=window.location.href;
if(currentLink.indexOf(menuLink)!=-1){
links[i].className=classCur; }
}


パラメータの説明:

1.menuId: リンク グループの ID;
2.classCur: 強調表示されたときのスタイル クラス名。メソッド:

window.onload=function highThis( ){highURL("youId","youhighclass");}
2 番目のタイプのクリックでは、現在のクラスがハイライト表示されます:




コードをコピー

コードは次のとおりです: //@Mr.Think---クリックして強調表示機能を実現しますhighOnclick(elemId,classCur) {

if (!document.getElementsByTagName ) return false;

if (!document.getElementById(elemId)) return false; 🎜>var elemId = document.getElementById(elemId);
var links = elemId.getElementsByTagName("a");
for (i = 0; i リンク[i].onclick = function() {
for (n = 0; n < links.length; n ) {
links[n].className = "";
this.className = classCur ;
this.blur();
}
}
}
}


パラメータの説明:

1.elemId:リンクグループ;
2.classCur: 名前をクリックした後に表示されるスタイルクラス:

window.onload=function highThis(){highOnclick("youId","youhighclass");
このメソッドは拡張性が高く、たとえば、parentNode .nodeName の値を判断して、特定のタイプのリンクが通過されないようにすることができます。
ソース コードのダウンロードとデモ
友達によっては、使い方がわからないので、以前に書いたこのクラスに関連するページを特別に整理しました。デモページとダウンロードアドレスを提供します。必要な友達はそれを表示またはダウンロードできます。ダウンロードアドレス