使用CSS、Javascript和锚点(无唯一ID)控制显示/隐藏多个DIV
我有一个旧的JavaScript/CSS文件,它过去(在当前浏览器中不再工作)通过锚定标记切换多个使用CSS、Javascript和锚点(无唯一ID)控制显示/隐藏多个DIV,javascript,html,css,stylesheet,Javascript,Html,Css,Stylesheet,我有一个旧的JavaScript/CSS文件,它过去(在当前浏览器中不再工作)通过锚定标记切换多个divs的显示属性。CSS document.stylesheets将根据值“规则”进行切换,该值要求样式按特定顺序控制“无”到“块”的切换(或相反)。下面是指向JSFIDLE示例的链接: 下面是JavaScript: function NorB(arg){ if (arg=="n") { document.styleSheets[0].rules[0].style.display=='b
div
s的显示属性。CSS document.stylesheets将根据值“规则”进行切换,该值要求样式按特定顺序控制“无”到“块”的切换(或相反)。下面是指向JSFIDLE示例的链接:
下面是JavaScript:
function NorB(arg){
if (arg=="n") {
document.styleSheets[0].rules[0].style.display=='block';
document.styleSheets[0].rules[1].style.display=='none';
} else {
document.styleSheets[0].rules[0].style.display=='none';
document.styleSheets[0].rules[1].style.display=='block';
}
}
以下是HTML:
<table>
<tr>
<td>
<div class="narrative" id="rpmAct1">
<div class="buttons">
<div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative ></a></div>
<div class="bulButton"><a href="javascript: onClick=NorB('b')">List View ></a></div>
</div>
<div class="narrativeContent">
<div class="n">Narrative text</div>
<div class="b">
<ul>
<li>List Item A</li>
<li>List Item B</li>
<li>List ITem C</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="narrative" id="rpmAct2">
<div class="buttons">
<div class="narButton"><a href="javascript: onClick=NorB('n')">Narrative 2></a></div>
<div class="bulButton"><a href="javascript: onClick=NorB('b')">List View 2></a></div>
</div>
<div class="narrativeContent">
<div class="n">Narrative 2 text</div>
<div class="b">
<ul>
<li>List 2 Item A</li>
<li>List 2 Item B</li>
<li>List 2 ITem C</li>
</ul>
</div>
</div>
</div>
</td>
</tr>
</table>
由于页面上有大量的div
/anchor
元素,因此目标是避免为每个元素创建唯一的ID,并继续使用基本的CSS/JavaScript(避免使用jQuery等)。关于如何保持简单的想法?附加这些CSS
.b-mode .b, .n-mode.n {
display:block;
}
.b-mode .n, .n-mode.b {
display:none;
}
修改onclick操作
<a href="#" onclick="NorB(this,'n')">
帕菲的脚本正是我们所需要的:
function NorB(e, arg) {
var wrapper = e.parents('.narrative');
var rm = arg == 'n' ? 'b' : 'n';
wrapper.classList.add(arg + '-mode');
wrapper.classList.remove(rm + '-mode');
}
Object.prototype.parents = function (selector) {
if (selector.length == 0) return;
var prefix = selector.substr(0, 1);
if (prefix != '#' && prefix != '.') return;
var selector = selector.substr(1);
var p = this.parentNode;
while (p !== null) {
switch (prefix) {
case "#":
if (p.getAttribute('id') == selector) return p;
break;
case ".":
if (p.classList.contains(selector)) return p;
break;
}
p = p.parentNode;
}
return null;
};
每天学习,非常感谢您的指导 这通常是通过改变元素的类来实现的,而不是动态地改变CSS。每行有两个按钮,可在短文本消息和一组列表项之间切换。每一行独立于所有其他行工作,但是在这个JSFIDLE中,单击一行也会切换另一行。因为每一行的类名都是相同的,所以我希望每一次出现都能在所有行之间切换。太棒了!我认为我将无法使用DIV id进行排序,并找到特定于所切换内容的类。非常感谢你!
function NorB(e, arg) {
var wrapper = e.parents('.narrative');
var rm = arg == 'n' ? 'b' : 'n';
wrapper.classList.add(arg + '-mode');
wrapper.classList.remove(rm + '-mode');
}
Object.prototype.parents = function (selector) {
if (selector.length == 0) return;
var prefix = selector.substr(0, 1);
if (prefix != '#' && prefix != '.') return;
var selector = selector.substr(1);
var p = this.parentNode;
while (p !== null) {
switch (prefix) {
case "#":
if (p.getAttribute('id') == selector) return p;
break;
case ".":
if (p.classList.contains(selector)) return p;
break;
}
p = p.parentNode;
}
return null;
};
function NorB(e, arg) {
var wrapper = e.parents('.narrative');
var rm = arg == 'n' ? 'b' : 'n';
wrapper.classList.add(arg + '-mode');
wrapper.classList.remove(rm + '-mode');
}
Object.prototype.parents = function (selector) {
if (selector.length == 0) return;
var prefix = selector.substr(0, 1);
if (prefix != '#' && prefix != '.') return;
var selector = selector.substr(1);
var p = this.parentNode;
while (p !== null) {
switch (prefix) {
case "#":
if (p.getAttribute('id') == selector) return p;
break;
case ".":
if (p.classList.contains(selector)) return p;
break;
}
p = p.parentNode;
}
return null;
};