Question

当我将所选类分配给<a>标记时，我实际上已经使用了一次，但是，对于我的网站ID，我非常喜欢在整个<li>上设置所选类

这是html

<div class="left side-menu">
    <a href="index"><img class="logo" src="images/logo.png"></a>
    <ul class="navigation">
        <li class="menu-button" id="home"><a href="index">Home</a></li>
        <li class="menu-button" id="about-us"><a href="about-us">About</a></li>
        <li class="menu-button" id="portfolio"><a href="portfolio">Portfolio</a></li>
        <li class="menu-button" id="your-session"><a href="your-session">Your Session</a></li>
        <li class="menu-button" id="testimonials"><a href="testimonials">Testimonials</a></li>
        <li class="menu-button" id="contact-us"><a href="contact-us">Contact</a></li>
    </ul>
</div>

这是Javascript。

<script>
    $( document ).ready(function() {
        // store url for current page as global variable
    current_page = location.href.toLowerCase();
    alert(current_page);
    if (current_page.match()) {
        $("ul#navigation li#home").addClass('selected');
    } else if (current_page.match(/about-us/)) {
        $("ul#navigation li#about-us)").addClass('selected');
    } else if (current_page.match(/portfolio/)) {
        $("ul#navigation li#portfolio").addClass('selected');
    } else if (current_page.match(/your-session/)) {
        $("ul#navigation li#your-session").addClass('selected');
    } else if (current_page.match(/testimonials/)) {
        $("ul#navigation li#testimonials").addClass('selected');
    } else if (current_page.match(/contact-us/)) {
        $("ul#navigation li#contact-us").addClass('selected');
    } else { // don't mark any nav links as selected
        $("ul#navigation li").removeClass('selected');
    };
    });
</script>

css就像

div.side-menu {
    height: 100%;
    width: 250px;
    margin: 10px;
    background-image: url('/images/side-menu.png');
    background-repeat: repeat-y;
    min-height: 590px;
    position: relative;
    left: 37px;
    z-index: 9;
}
div.side-menu li{
    text-align:center;
    margin-bottom: 10px;
    padding: 10px;
    /* HOVER OFF */
   -webkit-transition: background-color 1s;
}
div.side-menu a{
    text-decoration:none;
    color:#c7ecf4;
}
div.side-menu li:hover a {
    color:#818E9E;
}
div.side-menu li:hover{
    background-color:#c7ecf4;
    /* HOVER ON */
    -webkit-transition: background-color 0.5s; 
}
ul.navigation{
    padding-left: 18px;
}
ul.navigation li.selected {
    background-color: #c7ecf4;
}

我已经看了几次，每次都有不同的方法。似乎使用<a>代码非常简单，但尝试使用<li>代替相当困难。

Answer 1

您的ul标签有一个名为“navigation”的类。不是身份证。但你在jQuery代码中分配了这样的代码：

ul#navigation li

首先，你必须纠正这个问题。像那样改变：

ul.navigation li

现在你的代码必须是这样的：

<script>
    $( document ).ready(function() {
        // store url for current page as global variable
        current_page = location.href.toLowerCase();
        var pageNameParts = current_page.split('/');

        // You can look console to check pageNamePart contents
        // and then remove this for bracket
        for (var i = 0; i < pageNameParts.length; i++) {
            console.log(pageNameParts[i]);
        }

        if (pageNameParts.length == 3) { // It's not 1 because there is 'http://'
            $("ul.navigation li#home").addClass('selected');
        } else if (pageNameParts[4] == 'about-us') {
            $("ul.navigation li#about-us").addClass('selected');
        } else if (pageNameParts[4] == 'portfolio') {
            $("ul.navigation li#portfolio").addClass('selected');
        } else if (pageNameParts[4] == 'your-session') {
            $("ul.navigation li#your-session").addClass('selected');
        } else if (pageNameParts[4] == 'testimonials') {
            $("ul.navigation li#testimonials").addClass('selected');
        } else if (pageNameParts[4] == 'contact-us') {
            $("ul.navigation li#contact-us").addClass('selected');
        } else {
            $("ul.navigation li").removeClass('selected');
    };
    });
</script>

如果它适合您，您可以使代码更短：

<script>
    $( document ).ready(function() {
        // store url for current page as global variable
        current_page = location.href.toLowerCase();
        var pageNameParts = current_page.split('/');

        // You can look console to check pageNamePart contents
        // and then remove this for bracket
        for (var i = 0; i < pageNameParts.length; i++) {
            console.log(pageNameParts[i]);
        }

        // First remove '.selected'
        $("ul.navigation li.selected").removeClass('selected')

        if (pageNameParts.length == 3) { // It's not 1 because there is 'http://'
            $("ul.navigation li#home").addClass('selected');
        } else {
            $("ul.navigation li#"+ pageNameParts[4]).addClass('selected');
        }
    });
</script>

根据哪个url是当前位置向li元素添加类

1 个答案: