Question

我有一个旧版本的JavaScript / CSS文件（不再适用于当前浏览器）通过锚标记来切换多个div的显示属性。 CSS document.stylesheets将根据值＆＃34;规则＆＃34;进行切换，这需要样式按特定顺序控制＆＃34; none＆＃34;到＆＃34;阻止＆＃34;切换（或反向）。这是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和类似）。关于如何保持这种简单的想法？

Answer 1

附加这些CSS

.b-mode .b, .n-mode.n {
    display:block;
}
.b-mode .n, .n-mode.b {
    display:none;
}

修改onclick操作

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

http://jsfiddle.net/ypnospae/

Answer 2

Parfait的剧本正是我们所需要的：

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，Javascript和Anchor显示/隐藏多个DIV，而无需唯一ID

2 个答案: