0

我有一个垂直显示的导航菜单。我希望在当前正在查看的页面左侧出现一个项目符号点。我已经阅读了一些关于使用背景更改li来指示页面的内容，但我不知道如何将其应用于使用项目符号..有什么想法吗？

<nav>
        <ul>
            <li><a href="#home">home</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#lookbook">lookbook</a></li>
            <li><a href="#services">services</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#">blog</a></li>
        </ul>
    </nav>

nav {
    position: fixed;
    right: 13%;
    top: 65%;
}

nav ul li {
    text-align: right;
}

http://jsfiddle.net/jtRws/

4

4 回答 4

1

更新

所有提议的解决方案的实时示例

与 AMC 合作，确定 JavaScript 解决方案在满足要求的情况下会更好地工作。所有内容都将出现在一个页面上，因此根据我的发现，CSS 解决方案将无法正常工作。我提出了简单的 jQuery 代码，以便在单击链接时显示一个项目符号。

jQuery 
$(window).load(function(event) {
    $('a').click(function() {
        $('#Nav li').removeClass();
        $(this).parent().addClass("current");                   
    });
});
CSS 
#navcontainer3 ul {
    width: 200px;
    list-style-type:disc;
}

#navcontainer3 ul li {
    color: #ccc;
    float:right;
    clear:right;
}

#navcontainer3 ul li.current {
    color: #000;
}

此页面包含所有解决方案的示例，但您可以在此链接中找到单独的 jQuery 解决方案：http: //jsfiddle.net/jtRws/10/。

有趣的问题。显然，有 JavaScript 解决方案，但看起来你想要一个纯 CSS 解决方案。

解决方案 0

通过将列表样式颜色设置为背景颜色来隐藏其他列表项项目符号。

所有页面都将具有相同的导航 HTML，但每个页面<body>都将具有该页面的id唯一性。例如：<body id="home">,<body id="products">等。然后，使用一些巧妙的 CSS，当前页面将获得特定的样式定义（最后一个定义如下）。

#navcontainer0 ul {
    width: 200px;
    list-style-type:disc;
}

#navcontainer0 ul li {
    color: #fff;
    float:right;
    clear:right;
}

body#home #homenav0,
body#products #prodnav0 {
    color: #000;
}

解决方案 1

用于background显示和隐藏项目符号图像。基于这篇文章，我使用了以下代码。这篇文章更详细地解释了这项技术。您将在下面找到与实际示例相同的代码。

CSS 
#navcontainer ul {
    width: 200px;
    padding:0;
    margin:0;
    text-align:right;
}

#navcontainer ul li a:hover {
    color: #930;
    background: #f5d7b4;
}

body#home a#homenav,
body#products a#prodnav,
body#faq a#faqnav,
body#contact a#connav {
    background:url(bullet.gif) 0 50% no-repeat no-repeat;
    padding-left:15px;
}
产品页面 
<body id="products">
    <div id="navcontainer">
        <ul id="navlist">
            <li><a id="homenav" href="index.html">Home</a></li>
            <li><a id="prodnav" href="products.html" >Products</a></li>
        </ul>
    </div>
</body>
于 2013-02-27T02:36:37.710 回答
0

我假设您正在使用锚点来浏览页面部分，所以我现在能想到的唯一方法是使用 javascript(jQuery)。

我已经更新了您的代码示例：http ://tinyurl.com/a6ypyuz

于 2013-02-27T04:59:41.900 回答
0

我了解您只想要当前页面的项目符号。所以首先我们要消除普通子弹。

ul {list-style-type:none;}

比我看到你在每个页面上都使用 id 作为内容 div。将其与属性选择器相结合，这是您可以执行的操作的示例：

#home li a[href='#home']:before, #about li a[href='#about']:before {
content:"•";pointer-events:none; text-decoration:none;
}
于 2013-02-27T08:22:33.680 回答
0

除了@earthdesigner 答案，如果您不想添加 jquery，请改用此 javascript：

http://jsfiddle.net/7uxcg/31/

window.onload = function() {
    // var nav = document.getElementById('nav');
    var nav = document.getElementsByTagName('NAV')[0].children[0];

    for(c in nav.children) {
        var li = nav.children[c];
        if(li.nodeName == 'LI') {
            li.onclick = function() {
                changeClass(this.children[0].hash);
            }
        }
    }

    function changeClass(cur) {
        var nav = document.getElementsByTagName('NAV')[0].children[0];

        for(c in nav.children) {
            var li = nav.children[c];
            if(li.nodeName == 'LI' && li.children[0].hash == cur)
                li.className = 'active';
            else
                li.className = ''
        }        
    }
};
于 2013-02-27T11:48:41.447 回答