将我的“onmouseover”更改为单击时显示，直到执行下一个操作

Question

我最近发布了一个论坛主题，当访问者将鼠标悬停在链接上时，将显示vid，现在我想将其(出于功能原因)更改为当有人单击链接时，div会出现并保持在屏幕上，直到另一个链接被单击。我怎么才能改变我的工作，让它正常工作，我现在似乎也不能让它工作…

CSS

.church_bio {
    width: 90%;
    height: 300px;
    margin: 30px auto; 
    display: none;
        background-color: yellow;
}

HTML

<div class="banner">
    <div class="banner_list">
        <div class="column" id="column_1">
            <p><a href="" onmouseover="show('bittaford_bio',1);"  onmouseout="show('bittaford_bio',2);" id="bittaford_link">Bittaford</a></p>
            <p><a href="" onmouseover="show('chaddlewood_bio',1);"  onmouseout="show('chaddlewood_bio',2);" id="chaddlewood_link">Chaddlewood (Plymouth)</a></p>
            <p><a href="" onmouseover="show('christ_bio',1);"  onmouseout="show('christ_bio',2);" id="chris_link">Christ Church (Estover)</a></p>
            <p><a href="" onmouseover="show('colebrook_bio',1);"  onmouseout="show('colebrook_bio',2);" id="colebrook_link">Colebrook (Plymouth)</a></p>
            <p><a href="" onmouseover="show('compton_bio',1);"  onmouseout="show('compton_bio',2);" id="compton_link">Compton</a></p>
            <p><a href="" onmouseover="show('cornerstone_bio',1);"  onmouseout="show('cornerstone_bio',2);" id="cornerstone_link">Cornerstone (Torpoint)</a></p>
            <p><a href="" onmouseover="show('crownhill_bio',1);"  onmouseout="show('crownhill_bio',2);" id="cornhill_link">Crownhill</a></p>
            <p><a href="" onmouseover="show('elburton_bio',1);"  onmouseout="show('elburton_bio',2);" id="elburton_link">Elburton</a></p>
        </div>
        <div class="column" id="column_2">
            <p><a href="" onmouseover="show('gateway_bio',1);"  onmouseout="show('gateway_bio',2);" id="gateway_link" >Gateway (Cattledown)</a></p>
            <p><a href="" onmouseover="show('halcyon_bio',1);"  onmouseout="show('halcyon_bio',2);" id="halcyon_link">Halcyon (N. Prospect)</a></p>
            <p><a href="" onmouseover="show('ivybridge_bio',1);"  onmouseout="show('ivybridge_bio',2);" id="ivybridge_link">Ivybridge</a></p>
            <p><a href="" onmouseover="show('millbrook_bio',1);"  onmouseout="show('millbrook_bio',2);" id="millbrook_link">Millbrook</a></p>
            <p><a href="" onmouseover="show('mount_bio',1);"  onmouseout="show('mount_bio',2);" id="mount_link">Mount Gould</a></p>
            <p><a href="" onmouseover="show('oreston_bio',1);"  onmouseout="show('oreston_bio',2);" id="oreston_link">Oreston</a></p>
            <p><a href="" onmouseover="show('pennycross_bio',1);"  onmouseout="show('pennycross_bio',2);" id="pennycross_link">Pennycross</a></p>
            <p><a href="" onmouseover="show('pomphlett_bio',1);"  onmouseout="show('pomphlett_bio',2);" id="pomhlett_link">Pomphlett</a></p>
        </div>
        <div class="column" id="column_3">
            <p><a href="" onmouseover="show('ridgeway_bio',1);"  onmouseout="show('ridgeway_bio',2);" id="ridgeway_link">Ridgeway (Plympton)</a></p>
            <p><a href="" onmouseover="show('roborough_bio',1);"  onmouseout="show('roborough_bio',2);" id="roborough_link">Roborough</a></p>
            <p><a href="" onmouseover="show('st_bio',1);"  onmouseout="show('st_bio',2);" id="st_link">St Budeaux</a></p>
            <p><a href="" onmouseover="show('shrewell_bio',1);"  onmouseout="show('shrewell_bio',2);" id="shrewell_link">Shrewell (City Centre)</a></p>
            <p><a href="" onmouseover="show('stoke_bio',1);"  onmouseout="show('stoke_bio',2);" id="stroke_link">Stoke</a></p>
            <p><a href="" onmouseover="show('woodford_bio',1);"  onmouseout="show('woodford_bio',2);" id="woodford_link">Woodford (Plympton)</a></p>
            <p><a href="" onmouseover="show('yealmpton_bio',1);"  onmouseout="show('yealmpton_bio',2);" id="yealmpton_link">Yealmpton</a></p>
        </div>
    </div>
</div>

<div class="wrapper">
    <div class="church_bio" id="bittaford_bio">Bittaford</div>
    <div class="church_bio" id="chaddlewood_bio">Chaddlewood (Plymouth)</div>
    <div class="church_bio" id="christ_bio">Christ Church (Estover)</div>
    <div class="church_bio" id="colebrook_bio">Colebrook (Plymouth)</div>
    <div class="church_bio" id="compton_bio">Compton</div>
    <div class="church_bio" id="cornerstone_bio">Cornerstone (Torpoint)</div>
    <div class="church_bio" id="crownhill_bio">Crownhill</div>
    <div class="church_bio" id="elburton_bio">Elburton</div>

    <div class="church_bio" id="gateway_bio">Gateway (Cattledown)</div>
    <div class="church_bio" id="halcyon_bio">Halcyon (N. Prospect)</div>
    <div class="church_bio" id="ivybridge_bio">Ivybridge</div>
    <div class="church_bio" id="millbrook_bio">Millbrook</div>
    <div class="church_bio" id="mount_bio">Mount Gould</div>
    <div class="church_bio" id="oreston_bio">Oreston</div>
    <div class="church_bio" id="pennycross_bio">Pennycross</div>
    <div class="church_bio" id="pomphlett_bio">Pomphlett</div>

    <div class="church_bio" id="ridgeway_bio">Ridgeway (Plympton)</div>
    <div class="church_bio" id="roborough_bio">Roborough</div>
    <div class="church_bio" id="st_bio">St Budeaux</div>
    <div class="church_bio" id="shrewell_bio">Shrewell (City Centre)</div>
    <div class="church_bio" id="stoke_bio">Stoke</div>
    <div class="church_bio" id="woodford_bio">Woodford (Plympton)</div>
    <div class="church_bio" id="yealmpton_bio">Yealmpton</div>
</div>

JS

<script type="text/javascript">
    function show(id,type) {
        if (type==1) {
            document.getElementById(id).style.display="block";
        }

        if (type==2) {
            document.getElementById(id).style.display="none";
        }
    }
</script>

就像我说的，我希望div保持在屏幕上，直到我的横幅中的另一个链接被点击。

提前谢谢你，马特。

Answer 1

我的建议是删除所有的内联脚本，使用如下代码：

var myFunction = function (e) {
    e.preventDefault();
    e.stopPropagation();
    // hide all elements
    for (var i = 0; i < bioElements.length; i++) {
        bioElements[i].style.display = 'none';
    };
    var nextID = (e.target.id).split('_link')[0];
    otherElement = document.getElementById(nextID + '_bio');
    otherElement.style.display = 'block';
}
var bioElements = document.querySelectorAll('.church_bio');
var elements = document.querySelectorAll('div.column a');

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function (event) {
        myFunction(event);
    });
};

Demo

演示

var myFunction = function (e) {
    e.stop();
    bioElements.setStyle('display','none');
    var nextID = (e.target.id).split('_link')[0];
    document.id(nextID + '_bio').setStyle('display','block');
}
var bioElements = $$('.church_bio');
var elements = $$('div.column a');

elements.addEvent('click', myFunction);

演示

var myFunction = function (e) {
    e.preventDefault();
    bioElements.hide();
    var nextID = (e.target.id).split('_link')[0];
    $('#' + nextID + '_bio').show();
}
var bioElements = $('.church_bio');
var elements = $('div.column a');

elements.on('click', myFunction);