javascript - 我想使用css或js从选项卡中隐藏一些select li项目(I want to hide some select li items from a tab with css or js)

Question

I want to hide some tabs from a search tab.(我想从搜索标签中隐藏一些标签。)

There is ul and li tab list.(有ul和li选项卡列表。) I want to hide some selected li item.(我想隐藏一些选定的li项目。) There is no class or ID for using display:none.(没有使用display：none的类或ID。) Here is the code:(这是代码：)

<ul class="nav nav-tabs" role="tablist">
<li role="st_hotel" class="">
   <a href="#st_hotel" aria-controls="st_hotel" role="tab" data-toggle="tab" aria- 
    expanded="false">Hotel</a>
</li>
<li role="st_tours" class="">
    <a href="#st_tours" aria-controls="st_tours" role="tab" data-toggle="tab">Tour</a>
</li>
</ul>

suppose I want to hide the second li which is TOUR.(假设我想隐藏第二个TOUR。)

how can I catch this li?(我怎么抓这个李？) there is no class or ID.(没有类别或ID。) Is it possible to catch this li with #st_tours role?(可以通过#st_tours角色抓住这个li吗？) or any other way?(或其他方式？) Please help me to solve this problem..(请帮我解决这个问题。)   ask by Tusher translate from so

Answer 1

Since it has a role attribute we can select it using that.(由于它具有role属性，因此可以使用该属性进行选择。)

 li[role="st_tours"] { display: none; } 

 <ul class="nav nav-tabs" role="tablist"> <li role="st_hotel" class=""> <a href="#st_hotel" aria-controls="st_hotel" role="tab" data-toggle="tab" aria- expanded="false">Hotel</a> </li> <li role="st_tours" class=""> <a href="#st_tours" aria-controls="st_tours" role="tab" data-toggle="tab">Tour</a> </li> </ul>