メニューの強調表示_JavaScript スキルを実装するための 2 つの単純な JS コード-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:24:30

オリジナル

1198 人が閲覧しました

静的ページを作成していたとき、強調表示を実現するために各ページに異なるスタイルを追加したことを思い出しました。強調表示は 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 の値を判断して、特定のタイプのリンクが通過されないようにすることができます。
ソースコードのダウンロードとデモ
友達によっては、使い方がわからないので、以前に書いたこのクラスに関連するページを特別に整理しました。デモページとダウンロードアドレスを提供します。必要な友達はそれを表示またはダウンロードできます。ダウンロードアドレス