Question

不确定如何把它放在这里但是这里。我有一个页面，我设置为在点击某个链接时显示和隐藏div，并且除此之外一切都工作得很好。按下前两个链接时，显示的div将与页面上的最后一个链接相同。同样，第三个以相同的方式链接，并且还有下划线和白色文本（正如我为网站上的一般链接设置的那样）

点击链接时显示的div根本不应该链接。

这是我的代码：

HTML

<div id="wrapper">
    <div id="container">
    <div id="shown" class="content">
        <div id="list">
            <div id="filler"></div>
            <a href="javascript:show('shown','id1','a1');"><div id="a1" class="inactive">WHAT IS LIGHT IT UP?</div></a>
            <div id="spacer"></div>
            <a href="javascript:show('shown','id2','a2');"><div id="a2" class="inactive">WHO</div></a>
            <div id="spacer"></div>
            <a href="javascript:show('shown','id3','a3');"><div id="a3" class="inactive">REGISTRATION FEES</div></a>
            <div id="spacer"></div>
            <a href="javascript:show('shown','id4','a4');"><div id="a4" class="inactive">WHEN</div></a>
            <div id="spacer"></div>
            <a href="javascript:show('shown','id5','a5');"><div id="a5" class="inactive">AWARDS</div></a>
            <div id="spacer"></div>
            <a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">GLOW DANCE PARTY!</div>
            <div id="filler"></div>
        </div>
        <div id="id1" class="hidden">text 1</div>
        <div id="id2" class="hidden">text 2</div>
        <div id="id3" class="hidden">text 3</div>
        <div id="id4" class="hidden">text 4</div>
        <div id="id5" class="hidden">text 5</div>
        <div id="id6" class="hidden">text 6</div>
    </div>
</div>

CSS

#wrapper{width:94%; float:left; position:relative; left:3%; background-color:rgba(163,207,98,0.7); margin:auto; border-radius:1.2em;}
#container{width:96%; float:left; position:relative; left:2%; margin-top:2%;}

#spacer{background-color:rgba(0,0,0,0.7); float:left; box-shadow: -1px 1px 1px rgba(255,255,255,0.7);}
#filler{height:1.5em; width:100%;}
#list{
    overflow:hidden;
    float:left;
    letter-spacing:1px;
    font-family:upc;
    font-size:1.35em;
}
#list a:link{text-decoration:none}
.active{
    text-shadow: -2px 1px 1px #000;
    background-color:rgba(0,0,0,0.5);
    color:#A3CF62;
}
.inactive{
    text-shadow: -2px 1px 1px rgba(255,255,255,0.5);
    color:#000;
}

.inactive:hover{
    text-shadow: -2px 1px 1px #000;
    background-color:rgba(0,0,0,0.5);
    color:#A3CF62;
    border-radius:2em;
}
.hidden {display: none}
.unhidden {
    margin-top:1.5em;
    margin-bottom:1.5em;
    display:block;
    text-align:justify;
    color:#A3CF62;
}

#shown{
    float:left;
    position:relative;
    background-color:rgba(0,0,0,0.5);
    border-radius:1.2em;
}

@media screen and (orientation:landscape){
    #list{width:20%; text-align: center; position:relative; float:left; right:20%;}
    #shown{width:80%; float:left; left:20%;}
    #spacer {
        width:90%;
        margin-top:0.1em;
        margin-bottom:0.1em;
        margin-left:auto;
        margin-right:auto;
        height:0.1em;
    }
    #stretch{display:none}
    .unhidden{width:80%; vertical-align: middle; float:left; position:relative; right:10%; overflow-y:auto;}
    .active{border-top-left-radius:2em; border-bottom-left-radius:2em;}
}

的JavaScript

var old_target,old_trigger;
function show(win, target, trigger){
    document.getElementById(win).className = 'content';
    if(old_target!==undefined) document.getElementById(old_target).className = 'hidden';
    if(old_trigger!==undefined) document.getElementById(old_trigger).className = 'inactive';
    document.getElementById(target).className = 'unhidden';
    document.getElementById(trigger).className = 'active';
    old_target = target;
    old_trigger = trigger;
}

Answer 1

最后一个<a href>元素缺少其结束标记，导致浏览器的HTML解析器生成意外结果。要查看意外效果，请从右键单击菜单中选择“检查元素”。

如何让我的div分开处理？

1 个答案: