2011-07-22 18 views
0

ゴール:
アドレス計算またはproject.htmlを入力するときは、メニューのメイン要素の1つに、入力しているWebページに基づいて背景色が表示されます。たとえば、calculate.htmlと入力した場合、Calculation(メニューから)という選択肢は、他の色とは異なる背景色を持つことによって選択する必要があります。ウェブページに背景色を追加する

問題:

私はあなた がリンクをクリックすると、背景色を持っていることによってマークを作る方法がわかりません。コードをjQueryで記述したいと思います。

可能であれば、要素「a href」に「id」を追加して背景色を変更するとよいでしょう。

jQueryの「プロジェクト」と「計算」の値は、HTMLコードの要素タイトルの値です。

HTML:

<div id="nav-menu"> 
    <ul id="kthh"> 
     <li><a href="calculation.html">Kalkylering</a></li> 
     <li><a href="project.html">Projekt</a></li> 
    </ul> 
</div> 

Javascriptを:

$(document).ready(function() 
{ 

var data = $('title'); 

    if(data[0].textContent == "Project") 
    { 
     $('#kthh').closest('li').next('li').find('a').addClass("asdd"); 

    } 
    if(data[0].textContent == "calculation") 
    { 
     //$('title').html('someHTML'); 
    } 

}); // ready 

CSS:

/* Menu for display */ 

#nav-menu ul 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#nav-menu li 
{ 
    float: right; 
} 

#nav-menu li a 
{ 
    height: 70px; 
    line-height: 110px; 
    float: left; 
    padding-left: 13px; 
    padding-right: 13px; 
    display: block; 
    color: #FFFFFF; 
    text-decoration: none; 
    text-align: center; 
    font-family: Verdana; 
    font-weight:bold; 
} 

#nav-menu li a:hover { background: #AA1133;} 

#nav-menu li.last-child { padding-right: 50px;} 

.asdd 
{ 
    background: #AA1133; 
} 
+1

を多くの場合、これはサーバ側で行われます。どのようなサーバーサイドの技術を使用していますか?クライアント側でなければならない理由は何ですか?一般に、jsが有効になっていなくても動作するように試して設計する必要があります。 – mrtsherman

+0

私は理解します。この文脈では、私はhtml、css、javascriptだけを使用しなければなりません。 –

答えて

0

私はあなたが使用してはならないと思いますが、textcontenttext

$(document).ready(function() 
{ 

    var data = $('title'); 

    if(data[0].text() == "Project") 
    { 
     $('#myFirstButton').addClass("asdd"); 

    } 
    if(data[0].text() == "calculation") 
    { 
     //... 
    } 

}); 

また、すべてのボタンにIDを追加することによって、あなたの人生を簡素化することができます。

<div id="nav-menu"> 
    <ul id="kthh"> 
     <li><a id="myFirstButton" href="calculation.html">Kalkylering</a></li> 
     <li><a id="mySecondButton" href="project.html">Projekt</a></li> 
    </ul> 
</div> 
関連する問題