操作所有 div 元素的内容 #(角色 = "tabpanel" ) - 样式 = "display: none;" 显示:块;



如何操作网站来更改所有div元素(角色="tabpanel"(-style=";显示:无"到style=";显示:块">

  • 通过class=";accordionItemContent";也可能

我想看到整个页面/div元素的总内容(所以操作是通过JS或CSS.或jquery(

<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;"></div>

因为页面在登录之后,所以通过站点检查/控制台进行更改可能是一种方法。


更新

我在写";显示";

  • 如果";块";它只显示一个没有内容的帧

我发现显示的元素与隐藏的元素有另一个主要区别:

<h1 class="uiaccordion" role="tab" a-exp="false" a-sel="false" tabindex="-1"><a href="#" id="manage_content_11_ac" tabindex="-1"></div>
<h1 class="uiaccordion" role="tab" a-exp="true"  a-sel="true"  tabindex="0"> <a href="#" id="manage_content_12_ac" tabindex="-1"></div>

->如何查看/激活内容?

jQuery。。。
$("div[role='tabpanel']").show();

或者。。。

$('.accordionItemContent').show();

在控制台中运行此操作

document.querySelectorAll('div.accordionItemContent.accordion.ui-reset.widget.uibottom[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});

针对已编辑的问题进行编辑,仅使用类别accordionItemContent

document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});

要更改更新中提到的其他属性:

document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
e.setAttribute(“tabindex”, 0) // Use this syntax to change all effected attributes
});

一种方法可以是创建一个通用的CSS类来隐藏元素,并将其添加/删除到要隐藏/显示的元素中:

function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => elem.classList.remove('hide'));
}
.hide {
display: none;
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV3: Lorem ipsum dolor sit consecutor amet</div>

如果你喜欢使用内联CSS,你可以用这种方式修改上面的代码:

function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => {
elem.style.display = 'block';
/*
* NOTE: if the inline style contains only the display property,
* you could even entirely remove it:
* 
*   elem.removeAttribute('style');
*/    
});
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV3: Lorem ipsum dolor sit consecutor amet</div>

相关内容

  • 没有找到相关文章

最新更新