Question

我有以下结构。

<ul id="dyn_nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a>
        <ul class="submenu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </li>
</ul>

第一级li（ul＃dyn_nav＆gt; li）应该从给定列表中获取随机类。

课程有蓝色，绿色，品红色，青色，红色等......

我想让这个菜单动态颜色不固定。

就像一个人可以有第一个菜单颜色绿色，另一个有蓝色。这只是我的想法。

请jQuery。

Answer 1

$(document).ready(function() {
    var classes = ['blue', 'green', 'magenta', 'cyan', 'red'];
    $('ul#dyn_nav>li').each(function(i) {
        $(this).addClass(
            classes[Math.floor(Math.random()*classes.length)]);
    });
});

我还在样式表中添加了ul#dyn_nav>li>a { color: inherit; }，以便颜色会影响li中的链接，而不仅仅是子弹。

Answer 2

将您的颜色放入数组randomize it，并使用jQuery.each和addClass分配值。

Answer 3

Dutow是对的。 @Wazdesign：你也可以尝试这个片段：

function rand(){ return (Math.round(Math.random())-0.5); }
    var colors = new Array('blue','yellow','red','green');//you can add more class here
    var init = colors.sort( rand );
    $('ul li').each(function(i,el){ 
     $(el).addClass(init[i]); 
   });

如何将随机类添加到链接列表

3 个答案: