1

タブの色を調整するタスクがあります。最初のタブには明るい色が含まれ、2 番目の色には 1 番目よりも少し暗い色が含まれ、3 番目の色は 2 番目よりも暗いなどです。{Gradient Color} そのために、指定されたコードがあります

  <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を使用してこれを行うにはどうすればよいですか? デモ

4

2 に答える 2

1

目的を達成するための最も簡単な方法は、 HSLカラー モデルを理解することです。HSL の優れた点は、変数の 1 つを変更するだけで色の明度を変更できることです。また、CSS は有効な色指定子として HSL (アルファが必要な場合は HSLA) を受け入れます。

あなたがする必要があるのは、できればHSL形式で、特定の色から始めることです。(RGB から HSL へのコンバーターはたくさんあります。必要に応じて、Google で「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);
    });
}

私のソリューションのフィドルをチェックしてください。

于 2013-04-26T14:51:05.047 に答える
0

このフィドルを確認してください: 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)');
});
于 2013-04-26T14:39:33.260 に答える