2011-07-22 72 views
0

目标:
当您输入地址计算或project.html时,菜单中的一个主要元素应根据您输入的网页标记背景颜色。例如,如果您输入的是calculate.html,则应选择名为Calculation(来自菜单)的选择项,以便与其他背景色相比较。在网页中添加背景颜色

问题:

我不知道如何通过具有背景色,一旦你 单击的链接做一个标记。我想要用jQuery编写代码。

如果可能的话,最好在元素“a href”中添加“id”来改变背景颜色。

jQuery的值“Project”和“calculation”是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>