Warum nicht mein $ ('id'). Css ('property: value'); seinen Stil anwenden?

Question

Ich versuche, eine jQuery wenn Aussage zu machen, das sagt: Wenn ein Benutzer auf der angegebenen Seite ist, dann bestimmten Stil anzuwenden; In diesem Fall wird die ID eines Anker-Tags mit einem unteren Rand versehen.

// index.php - referenced html 
... 
<link href='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript' /> 
<style type="text/javascript"> 
@import url('js/active-links.js'); 
</style> 
... 
<ul> 
    <li><a id="home" href="#">HOME</a></li> 
    <li><a id="other1" href="#">OTHER1</a></li> 
    <li><a id="other2" href="#">OTHER2</a></li> 
</ul> 
... 


// active-link.js 
$(document).ready(function() { 
    if (document.URL.indexOf('index.php') >= 0) { 
     $('#home').css('border-bottom: 18px solid #9cd588'); 
              } 
         }); 

Idealerweise habe ich dies für jeden Link mit einem anderen gelten, wenn die gleiche Sache. Momentan tut es nichts.

Answer 1

Sie nähern sich dem Problem falsch.

Bestimmen Sie auf der Serverseite den aktiven Link aus dem Menü, und fügen Sie dem aktiven Menüelement einen Klassennamen active hinzu.

$active = "Home"; 
... 
echo "<li"; 
if ($active == "Home") { echo " class=\"active\" "; } 
echo ">Home</li>"; 

Dann in Ihrem CSS, ohne irgendwelche Bedingungen:

.active { border-bottom: 18px solid #9cd588; } 

Answer 2

Einfache Lösung:

$('#home').css('border-bottom', '18px solid #9cd588');