Question

我正在尝试创建一个jQuery if语句：如果用户在指定页面上，则应用指定的样式;在这种情况下，它将底部边框放在锚标记的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');
                                            }
                       });

理想情况下，如果说明相同的话，我会将这个应用于每个链接。目前它没有做任何事情。

Answer 1

简单的解决方案：

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

Answer 2

你正在接近这个问题。

在服务器端，从菜单中确定活动链接，并将active类名添加到活动菜单项。

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

然后，在你的CSS中，没有任何条件：

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

为什么我的$（'id'）。css（'property：value'）;运用它的风格？

2 个答案: