Question

我正在尝试运行代码以单击链接并打开div。如果我点击其他链接，则应关闭上述链接。点击的应该是一个。

除了javascript或dojo，我不能使用jquery或其他任何东西。我不知道道场，但javascript。

我正在尝试这样：

<ul id="sm">
    <li><a href="javascript:void(0);" onclick="toggle_visibility('s');">abc</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sa');">xyz</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('ss');">def</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sd');">efg</a></li>
    <li><a href="javascript:void(0);" onclick="toggle_visibility('sfd');">Ter</a></li>
</ul>

JS Code我正在使用

function toggle_visibility(id) {
    var e = document.getElementById(id);
    e.style.display = ((e.style.display!='none') ? 'none' : 'block');
}

将Div提供为：

<div id="s" style="display:none"></div>
<div id="sa" style="display:none"></div>
<div id="ss" style="display:none"></div>

一旦点击它们就会重叠

Answer 1

请尝试以下示例。我希望它能帮助你.......）

<html>
<head>
<style>
.head {
    border:1px solid #666;
    background-color:#f0f0f0;
    padding:3px;
    cursor:pointer;
}
.content {
    border:1px solid #666;
    background-color:#fff;
    height:100px;
    padding:3px;
}
</style>
<script type="text/javascript">
function hideShoowTab(ctb) {
    var ptb = document.getElementById("ptbname").value
    if(document.getElementById("ptbname").value=="") {
        document.getElementById("content"+ctb).style.display="block";
    }
    else if(ptb==ctb) {
        if(document.getElementById("content"+ctb).style.display=="block") {
            document.getElementById("content"+ctb).style.display="none";
        }
        else {
            document.getElementById("content"+ctb).style.display="block";
        }
    }
    else {
        document.getElementById("content"+ptb).style.display="none";
        document.getElementById("content"+ctb).style.display="block";
    }
    document.getElementById("ptbname").value=ctb;
}
</script>
</head>
<body>
    <div>
        <div id="head1" class="head" onclick="hideShoowTab('1')">Head 1</div>
        <div id="content1" class="content">Content 1</div>
    </div>
    <div>
        <div id="head2" class="head" onclick="hideShoowTab('2')">Head 2</div>
        <div id="content2" class="content" style="display:none;">Content 2</div>
    </div>
    <div>
        <div id="head3" class="head" onclick="hideShoowTab('3')">Head 3</div>
        <div id="content3" class="content" style="display:none;">Content 3</div>
    </div>
    <input type="hidden" id="ptbname" name="ptbname" value="1" />
</body>
</html>

显示/隐藏以手风琴的形式工作

1 个答案: