html让li处于被选中状态,JavaScript通过选择HTML属性不起作用来隐藏li标签

我有3列,其中包括动态生成的列表元素(li标签) 这些有一个属性,我试图用来隐藏一行/ li当字符数量是没有达到这个元素(通过使用不透明属性)JavaScript通过选择HTML属性不起作用来隐藏li标签

我有它的工作...有时,有时它只适用于3列中的一列... 因此,我会很感激一些洞察什么是错误的这里。

(function() {

// selecting all elements with class

// class="checkout-tariff-meta-maybe-hidden"

var elems = $(".checkout-tariff-meta-maybe-hidden");

// interact between founded elements

for (var k = 0; k < elems.length; k++) {

// getting text content size

var textSize = elems[k].textContent.length;

// if text size is one we will hide element

if (textSize <= 1) {

// hiding

elems[k].style.opacity = "0";

}

}

}());

2014-12-03

scaap

+0

这是不可取的褪色页面上的文本。如果你不希望他们被看到,请完全删除它们。 –

2014-12-03 19:45:14

+1

是的,但如果我删除它们,然后列高度变化,不再与其他两个对齐。所以我找到了这个.. –

2014-12-03 19:47:31

+0

将包含元素加倍,给外部一个高度,然后隐藏内部。这种方式,身高保持不变。 –

2014-12-03 19:51:36

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用CSS的`:active`伪类和`:focus`伪类来实现鼠标点击li元素时被选中并保持选中状态。 首先,使用`:active`伪类来定义当点击li元素时应用的样式,例如: ```css li:active { background-color: #ccc; } ``` 这将使li元素在被点击时具有灰色背景色。 然后,使用`:focus`伪类来定义当li元素获得焦点时应用的样式,例如: ```css li:focus { outline: none; background-color: #ccc; } ``` 这将使li元素在获得焦点时具有灰色背景色,并且删除默认的蓝色边框。 请注意,`:focus`伪类只适用于可获取焦点的元素,如a、input等。如果要使li元素可获取焦点,请为其添加tabindex属性,例如: ```html <li tabindex="0">列表项</li> ``` 这样,用户就可以使用键盘导航到li元素并将其选中。 最后,为了保持选中状态,您可以使用JavaScriptli元素被点击时添加一个类,例如: ```css li.selected { background-color: #ccc; } ``` 然后,您可以在JavaScript使用以下代码来添加和删除该类: ```js // 获取所有li元素 const lis = document.querySelectorAll('li'); // 为每个li元素添加点击事件监听器 lis.forEach(li => { li.addEventListener('click', () => { // 删除所有li元素的selected类 lis.forEach(li => { li.classList.remove('selected'); }); // 为被点击的li元素添加selected类 li.classList.add('selected'); }); }); ``` 这样,当用户点击li元素时,它将获得selected类,并保持选中状态,直到用户单击其他li元素。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值