I'm trying to make a jQuery if statement that says: If a user is on the specified page, then apply specified style; in this case it's putting a bottom-border on an anchor tag's id.

// 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');
                                            }
                       });

Ideally, I will have this apply to each link with an else if stating the same thing. Currently it's not doing anything.

• css
• navigation
• border

You're approaching the problem wrong.

In the server side, determine the active link from the menu, and add an active classname to the active menu item.

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

Then, in your CSS, without any conditions:

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

Simple solution:

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