borderBottomの色を最上位の住所に変更

私は自分のサイトに非常に基本的なメニューを作っています。私はborder-bottomプロパティを使って項目に下線を引いています。私が望むのは、あなたが特定のページにいる場合、下線のピンクを強調表示することです。私はカスタムの "url"要素と "link"属性を使用しました。私はpage1の項目がピンクに下線を引くように、ユーザーがpage1にいる場合はそうしたいと思います。ここまで私がこれまでに試したことは次のとおりです。これは完全に間違っていました。私はW3Schoolのコードを少し試していました。は、私も試してみました：borderBottomの色を最上位の住所に変更

<script> 
function menuCol(url){if(top.location == url){this.style.borderBottom="solid #F05";};} 
</script>

^この1つは働いていたが、私は、スクリプトがページとURL要素のIDと一致できるよう、すべてのページの「[PAGE NO]」を含める必要がありました。

誰かが実際にページIDタグを入れることなくこの作業を行う方法を知っていますか？

----- -----編集申し訳ありませんが、私は言葉に問題を置く方法を正確にはわかりませんが、ここで（現在は）ページのソースコードです：

http://3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm

<head> 
<title>Menu</title> 

<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/bar_sidegrey.js"></script> 

<script> 
$(document).ready(function(){ 
$("url").click(function(){ 
top.location.href="http://"+$(this).attr("link") 
}); 
}); 
</script> 

<script> 
function col(){if(top.location.href==document.getElementsByTagName("url")[1].link){this.style.borderBottom="solid #F05";};} 
</script> 

<style> 
url{text-decoration:none;font-size:15px;padding:3px;border-bottom:solid #AAA;} 
url:hover{cursor:pointer;border-bottom:solid #FFF} 

body{background:black;color:white;font-family:arial;cursor:default;} 
</style> 
</head> 



<body onselectstart="return false;" oncontextmenu="return false;" onload="col();"> 
<center> 

<url link="3s.uk.to">Home</url> 
<url link="3apps.uk.to">App Store</url> 
<url link="3659905.webs.com/ExternalPages/Desktop/Menubar_test.htm">Menu Test</url> 

</center> 
</body>

出典

2012-04-01 celliott1997

あなたはどのマークアップを使用していますか？どのようなタイプのURLを使用していますか（ルート相対、相対または絶対）ですか？ –

残念ながら、私は数回それを読んだ後でさえ問題を理解しません。完全なコードスニペットを提供してください。 menuColはどのように呼び出されていますか？ JQueryを使用できますか？あなたはこれが有効だと言っていますが、提供されたコードスニペットではページ番号を使用しませんでした。 URL要素はどういう意味ですか？ – amitamb

TBH、わかりません。私がWebs.comのサブドメインを使用していると言ったら、助けになるでしょうか？私が使用したいURLのリスト：http://3659905.webs.com/index.htm、http://3659905.webs.com/Apps/Store.html。 – celliott1997

私が作ることができる最高の推測では、問題の情報のスパース性を考えると、これはです：

// in real life, use: 
// var url = window.location; 
var url = "http://some.domain.com/index.html"; 

function markActive(elem) { 
    if (url.indexOf(elem.href.split('/').pop()) > -1) { 
     return 'active' 
    } 
} 

var as = document.getElementsByTagName('a'); 
for (var i=0,len=as.length; i<len; i++){ 
    as[i].className = markActive(as[i]); 
}

JS Fiddle demoです。

これは、現在の化身で、唯一のページの名前のために働くので、あなたは、異なるディレクトリにあるものの、複数のindex.htmlのページを持っていた場合（あなたがwww.example.com/index.html現在であれば）、彼らはすべてのアクティブなクラスを割り当てます。

出典

2012-04-01 17:55:01

これは私が必要とするものです。ありがとう。 – celliott1997

言われたように、もっとコードが必要です。

しかし、あなたは現在の「ページ名」を取ると、あなたがこれを行うことがそのページを含むリンクを取得したい場合：

//get current adress 
var URL = window.location.pathname; 
//get the filename with extension 
var PageName = URL.substring(URL.lastIndexOf('/') + 1); 
//use jquery to find links pointing to the file 
$('#YOURMENU a[href='+PageName+']').css("border-bottom-color", "#F05");

出典

2012-04-01 17:54:15

これも役立ちます。ご回答有難うございます。 – celliott1997

borderBottomの色を最上位の住所に変更

答えて

関連する問題