現在のコラムのハイライト表示をjs検索で実現するコード
現在の欄をハイライトします。
JSは現在のURLが現在の欄に対してハイライト表示されていると判断し、重要なのはindexOfを用いて2つの文字列の中で初めて出現した位置を判断し、出現していなければ-1に戻り、他の結果を返した文字列の所在要素と一つのクラスを定義することである。
HTMLhref="///www.jb 51.net/html/list/index_127.httm" title=「インフォメーションセンター」情報センター
クリックしたらブラウザはどう変わりましたか?はい、アドレスバーが変わりました。
//wwww.jb 51.net/htmlリスト/index_127.httm
使用 document.location.href;
取得したのはこのアドレスです。
そして、現在のウェブページのすべての接続を巡回して、hrefの各接続の値を取得します。巡回コード:
JSは現在のURLが現在の欄に対してハイライト表示されていると判断し、重要なのはindexOfを用いて2つの文字列の中で初めて出現した位置を判断し、出現していなければ-1に戻り、他の結果を返した文字列の所在要素と一つのクラスを定義することである。
HTML
<div id="nav">
<ul>
<li><a href="//www.jb51.net/html/list/index_127.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_1.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_104.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_96.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_7.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_84.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_8.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_86.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_11.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_27.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_99.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/html/list/index_54.htm" title=" "><span> </span></a></li>
<li><a href="//www.jb51.net/search.asp" title=" "><span> </span></a></li>
</ul>
</div>
JS
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++)
{
var links = myNav[i].getAttribute("href");
//alert(links)
//alert(myNav[i]);
var myURL = document.location.href;
if(myURL.indexOf(links) != -1)
{
myNav[i].className="d";
}
}
現在の欄はハイライトが出ていますが、分かりましたか?ないなら、もっと詳しく話します。まず、接続をクリックしてください。 クリックしたらブラウザはどう変わりましたか?はい、アドレスバーが変わりました。
//wwww.jb 51.net/htmlリスト/index_127.httm
使用 document.location.href;
取得したのはこのアドレスです。
そして、現在のウェブページのすべての接続を巡回して、hrefの各接続の値を取得します。巡回コード:
var myNav = document.getElementById("nav").getElementsByTagName("a");
for(var i=0;i<myNav.length;i++)
{
var links = myNav[i].getAttribute("href");
}
indexOf関数を使ってページのすべての接続を比較すると、キーワードがあります。127.httmに出現する。もしあれば、現在の接続であることを示します。現在の接続のスタイルを変更します。これは現在のコラムのハイライトを実現しました。現在のコラムのハイライトは実用的なテクニックです。ユーザー体験を増やす上で特にメリットがあります。しかし、実用的な過程では、いくつかの詳細に注意する必要があります。例えば、検索バーのブログは外部チェーンで接続されています。このチェーンを注文した時は、明るいですか?ここもただ、現在のコラムがハイライトを表示している時に発生する可能性のある問題を少し話しても、解決方法があるかもしれません。