Question

我有一个垂直显示的导航菜单。我想要一个子弹点出现在当前正在查看的页面的左侧。我已经阅读了一些关于使用应用于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/

Answer 1

更新

Live examples of all proposed solutions

使用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;
}

This page contains examples of all the solutions但您可以在此链接中找到jQuery解决方案：http://jsfiddle.net/jtRws/10/。

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

解决方案0

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

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

#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显示和隐藏项目符号图像。 Based on this article我使用了以下代码。 The article explains the technique in greater detail.您将在下面找到与实例相同的代码。

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>

Answer 2

我假设你使用锚点来浏览页面部分，所以我现在能想到的唯一方法就是使用javascript（jQuery）。

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

Answer 3

据我所知，您只需将子弹投放到当前页面。首先，我们要消除正常的子弹。

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;
}

Answer 4

除了@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 = ''
        }        
    }
};

使用bullet指示导航菜单中的当前页面

4 个答案:

更新

解决方案0

解决方案1

使用bullet指示导航菜单中的当前页面

4 个答案:

更新

解决方案0

解决方案1 ​​

解决方案1