为所有 div 元素操作内容#（使用 role="tabpanel"） - style="display: none;"显示：块；答案

【问题标题】：Manipulate content # for all div elements (with role="tabpanel") - style="display: none;" to display: block;为所有 div 元素操作内容#（使用 role="tabpanel"） - style="display: none;"显示：块；
【发布时间】：2021-03-20 14:30:47
【问题描述】：

如何操纵网站来改变一切 div 元素（带有角色=“tabpanel”） - 样式=“显示：无；” to style="display: block;"

通过 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>

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

【问题讨论】：

这里有一些东西可以让你的 Javascript 代码开始。 stackoverflow.com/questions/46648761/…
看起来该页面的作者遇到了麻烦，如果他们仅使用 CSS 向未经授权的访问者隐藏创作的内容......
解决方案显示框架[无内容]（如原始问题中所问）。如何激活内容以及

标签： javascript html jquery css dom

【解决方案1】：

jQuery...

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

或者...

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

【讨论】：

【解决方案2】：

在控制台中运行

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
});

【讨论】：

【解决方案3】：

一种方法可能是创建一个通用 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>

【讨论】：