如何更改非活动列表项的字体颜色？

Question

html 代码如下所示，它在屏幕顶部创建了用于导航到程序多个部分的选项卡。

<ul id="navigationMenuTop" class="nav navbar-nav" data-bind="foreach: getRoutes">
    <li data-bind="css: { active: isActive() }">
        <a data-bind="attr: { href: ... } >

现在我需要点亮其中一个选项卡，以防程序的某个部分需要用户注意。这些注意事项的检查每 10 分钟完成一次，如果检查 returns 为真，则需要突出显示该选项卡。我有这一行用于在 if 语句的视图模型中突出显示。

$('#navigationMenuTop a[href*="registration"]').parent().css('background-color', '#ff4500');

问题是更改颜色的选项卡不是活动选项卡，文本颜色将显示为灰色，表示处于非活动状态。将其设置为活动状态不仅会改变文本颜色，而且这不是一种选择。

如何更改非活动列表项的文本颜色？

Answer 1

所以我又尝试了一种方法并且成功了...

$('#navigationMenuTop a[href*="registration"]').css('color', '#000000');

Answer 2

我想我有点过火了..但就这样吧。您可以单击一行，它会突出显示，行在需要注意时会突出显示，...全部删除，没有 jquery ..

class Item {
  constructor(id, name) {
    this.id = id;
    this.name = ko.observable(name);
  }
}

class ViewModel {
  constructor() {
    this.items = ko.observableArray([]);
    this.active = ko.observable(null);
    this.attentions = ko.observableArray([]);
    this.getItems()
      .then(items => {
        this.items(items);
        
        setInterval(() => {
          this.getAttentions()
            .then(items => {
                            this.attentions(items);
            })
        }, 3000);
      })
      .catch(error => {
        console.log(error);
      });
  }

  async getItems(resolve, reject) {
    return new Promise((resolve, reject) => {
      const items = [
        new Item(1, 'foo'), new Item(2, 'bar'), new Item(3, 'this'),
        new Item(4, 'is'), new Item(5, 'tedious')
      ];
      setTimeout(() => resolve(items), 300);
    });
  }

  async getAttentions(resolve, reject) {
    return new Promise((resolve, reject) => {
      const items = this.getRandom(this.items(), 2);
      setTimeout(() => resolve(items), 300);
    });
  }

  toggleActive(item) {
    const active = this.active();
    if (active && active === item) this.active(null);
    else this.active(item);
  }

  getRandom(arr, n) {
    var result = new Array(n),
      len = arr.length,
      taken = new Array(len);
    if (n > len)
      throw new RangeError("getRandom: more elements taken than available");
    while (n--) {
      var x = Math.floor(Math.random() * len);
      result[n] = arr[x in taken ? taken[x] : x];
      taken[x] = --len in taken ? taken[len] : len;
    }
    return result;
  }
  
  hasAttention(item) {
    return this.attentions().find(x => x.id === item.id);
  }
}

ko.applyBindings(new ViewModel());

table tbody tr {
  color: #999;
}
table tbody tr.item-active {
  background-color: rgba(1,1,1,.2);
  color: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
<thead>
  <tr>
    <th>id</th>
    <th>name</th>
    <th>!</th>
  </tr>
</thead>
<tbody data-bind="foreach:{ data: $root.items, as: 'item' }">
  <tr data-bind="css: { 'item-active': $root.active() == item }, click: () => $root.toggleActive(item)">
    <td data-bind="text: id"></td>
    <td data-bind="text: name"></td>
    <td data-bind="style: {'background-color': $root.hasAttention(item) ? 'red' : 'transparent'}"></td>
  </tr>
</tbody>
</table>

如何更改非活动列表项的字体颜色？

How to change font-color for inactive list item?

jquery

css

knockout.js