Question

我需要动态组合“活动”类来管理某些链接的样式。我有这个代码，但不起作用..

<script type="text/javascript" language="javascript">  
function locationPathname(){  

    var path = window.location.pathname.split('/');
    path = path[path.length-1];
    alert(path);
    if (path !== undefined) {
    $('livello2 a[href="/' + path + '"]').addClass('active');
  }
    }
 </script>

和html：

 <div class="livello2">
                 <div class="live">
                     <a href="./Live.php"><img src="live_off.png"></a>
                 </div>
                 <nav class="menu">
                     <ul>
                         <a href="./index.php" ><li>HOME</li></a>
                         <a href="./Concerti.php"><li>CONCERTI</li></a>
                     </ul>
                 </nav>
       </div>

的CSS：

.active{background-color:red}

任何人都有任何建议或看到它？

Answer 1

在你的JS中你这样做：

$('.livello2 a[href="/' + path + '"]')

（假设您已在选择器的开头添加了该点）将被转换（在计算path变量之后）为

之类的内容

$('.livello2 a[href="/Concerti.php"]')

但代码中的实际href属性以.（点）开头，如

href="./Concerti.php"

所以你需要将上面的JS片段更新为

$('.livello2 a[href="./' + path + '"]')

Answer 2

替换这个

$('livello2 a[href="/' + path + '"]')

这一个

$('.livello2 a[href="/' + path + '"]')

Answer 3

除了@Murali Prasanth关于在JS片段中添加点的答案之外，我建议确保在结束</body>之后立即放置你的javascript块。如果它不能正常工作，因为页面还不知道.livello2 - 它还没有被加载。所以，要么在关闭</body>之前把JS放到正确的位置，要么像这样包装你的javascript代码：

<script type="text/javascript" language="javascript">  
    $(document).ready(function () {
        function locationPathname(){
        …
        }
    });
</script>

根据网址分配不同的类

3 个答案: