我有一个旧的 JavaScript/CSS 文件,它曾经(在当前的浏览器中不再工作)通过 anchor 标记切换多个 div
的显示属性。 CSS document.stylesheets 将根据值“规则”进行切换,这要求样式处于特定顺序以控制“无”到“阻止”切换(或相反)。这是 JSFiddle 示例的链接:
JSFiddle
这是 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>
最后,CSS:
.n {
display:block;
}
.b {
display:none;
}
.b ul {
margin-left:3px;
margin-top:0px;
margin-right:10px;
margin-bottom:-2px;
}
.b ul li {
list-style-type:square;
list-style-position:outside;
line-height:12px;
}
.buttons {
position:relative;
width:300px;
}
.narButton {
width:80px;
float:left;
padding:2px 0px 2px 5px;
}
.bulButton {
width:80px;
float:left;
padding:2px 0px 2px 5px;
}
.bulButton a, .narButton a {
font-size:14px;
font-style:normal;
text-decoration:none;
}
.narrativeContent {
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
padding:5px;
}
由于页面上有大量的div
/anchor
元素,目标是避免为每个创建唯一的ID,继续使用基本的CSS/JavaScript(避免使用 jQuery 等)。关于如何保持简单的想法?
最佳答案
附加这些 CSS
.b-mode .b, .n-mode.n {
display:block;
}
.b-mode .n, .n-mode.b {
display:none;
}
修改点击 Action
<a href="#" onclick="NorB(this,'n')">
修改Javascript
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;
};
关于javascript - 使用 CSS、Javascript 和没有唯一 ID 的 anchor 控制显示/隐藏多个 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28121638/