Question

我有一个任务来排列标签的颜色。第一个标签包含浅色，第二个颜色包含比第一个更暗的颜色，第三个颜色比第二个颜色更暗等。{渐变颜色} 为此，我有给定的代码

  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit </p>
  </div>
  <div id="tabs-2">
    <p>Morbi</p>
  </div>
  <div id="tabs-3">
    <p>Mauris </p>
    <p>Duis cursus.</p>
  </div>
</div>


</body>
</html>

如何使用jquery执行此操作？Demo

Answer 1

最简单的方法就是了解HSL颜色模型。关于HSL的好处是它可以让你通过修改其中一个变量来改变颜色的亮度 - 而且CSS接受HSL（如果你想要alpha则接受HSLA）作为有效的颜色说明符。

您需要做的是从给定的颜色开始，最好是HSL格式。（有很多转换器从RGB到HSL，如果需要，只需谷歌“将RGB转换为HSL”。）一旦你有了色相和饱和度，就可以线性插入你所拥有的标签数量的亮度值。（而不是将亮度绑定在0和1之间，我会将它绑定在0.25和0.75之间，所以你不会有极端情况会让你很难看到背景。）

这是我制作的工作代码：

$(function () {
  $("#tabs").tabs();
});

var input_prefix = "hsl(0, 100%, ";
var li = $("#tabs li a");
var count = li.length;

if (count == 1) {
    // This is just here for thoroughness - my algorithm depends on at least 2 tabs
    li.css("color", input_prefix + "50%)");
} else {
    li.each(function (index) {
        // You want from lighter to darker, so start with the highest Lightness
        // 75 is what I'm setting as the upper percentage, and it's 50 percent from 
        // the start of 75 to the end of 25, divided over the number of elements.
        var value = 75 - (index * 50 / count);
        var color = input_prefix + value + "%)";
        $(this).css("color", color);
    });
}

查看解决方案的fiddle。

Answer 2

请检查这个小提琴：http://jsfiddle.net/5zfyU/3/ 关键是要将类添加到li元素：

class="gradient_me"

然后，在创建标签后，只需each全部，并依赖index的颜色。例如：

$('.gradient_me').each( function(index) {
      var color = 255-index*75;
      $(this).css('color', 'rgb('+color+', 0, 0)');
});

如何以格式排列选项卡的颜色

2 个答案: