如何替换Html标签？

Question

请检查我的代码：

<div id="seconds"> 
    <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a> 
    <b><span style="background-color:yellow;">30</span></b> 
    <a onclick="ChangeRefreshSeconds(60,this);" href="javascript:;">60</a> 
    <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a> 
</div> 

我现在的号码是30，当我在数60单击它应该是─

<div id="seconds"> 
    <a onclick="ChangeRefreshSeconds(15,this);" href="javascript:;">15</a> 
    <a onclick="ChangeRefreshSeconds(30,this);" href="javascript:;">30</a> 
    <b><span style="background-color:yellow;">60</span></b> 
    <a onclick="ChangeRefreshSeconds(120,this);" href="javascript:;">120</a> 
</div> 

的Javascript：

<script> 
function ChangeRefreshSeconds(s,t){ 
    //t.innerHTML='<span style="background-color:yellow;">'+s+'</span>'; 
    var textnode=document.createTextNode('<span style="background-color:yellow;">'+s+'</span>'); 
    t.replaceChild(textnode,t); 
} 
</script> 

我相信，我写错了我的JavaScript代码。

请解决我上面的代码。

Answer 1

像这样的事情会方便很多与jQuery，如果你要使用它的可能性，我肯定会劝你。

据我所见，您的代码只更改为<span>，并且不会将已更改的<span's>更改回<a>。我以为这就是你想要的？这个脚本（jQuery中）的一段代码看起来是这样的：

$("div#seconds a").click(function(){ 
    var originalValue = $(this).html(); 
    var spanValue = $("b span", $(this).parent()).html(); 

    $("b", $(this).parent()).replaceWith('<a href="javascript:;">'+spanValue+'</a>'); 
    $(this).replaceWith('<b><span style="background-color:yellow;">'+originalValue+'</span></b>'); 
}); 

Answer 2

您可以更换标签。但是你不必这样做。仅使用CSS方法就简单多了，而且不那么突兀。使用CSS，当您有active级别的课程时，您可以灵活地调整当前所选项目的样式，无论您想要什么。

function ChangeRefreshSeconds(seconds, obj) { 
 

 
    // do nothing if it's already active 
 
    if (obj.className === 'active') return; 
 

 
    var a = document.getElementById('seconds').children; 
 
    for (var i = 0; i < a.length; i++) { 
 
     a[i].className = ''; 
 
    } 
 
    obj.className = 'active'; 
 

 
    // do something else 
 
    alert('Current seconds: ' + seconds); 
 
}

#seconds .active, 
 
#seconds .active:active { 
 
    background: yellow; 
 
    cursor: default; 
 
    color: #333; 
 
    font-weight: bold; 
 
}

<div id="seconds"> 
 
    <a onclick="ChangeRefreshSeconds(15, this);" href="javascript:;">15</a> 
 
    <a onclick="ChangeRefreshSeconds(30, this);" href="javascript:;" class="active">30</a> 
 
    <a onclick="ChangeRefreshSeconds(60, this);" href="javascript:;">60</a> 
 
    <a onclick="ChangeRefreshSeconds(120, this);" href="javascript:;">120</a> 
 
</div>

Answer 3

试试这个：

<script> 
    function ChangeRefreshSeconds(s,t){ 
     var textnode=document.createTextNode('<span style="backgroundcolor:yellow;">'+s+'</span>'); 
     t.parentNode.replaceChild(textnode,t); 
    } 
</script> 

Answer 4

以下是我的方法，尝试这个

function ChangeRefreshSeconds(event){ 
 
    event = event || window.event; 
 
    var seconds = document.getElementById('seconds'); 
 
    var anchors = seconds.getElementsByTagName('a'); 
 
    
 
    var i; 
 
    for (i = 0; i < anchors.length; i++) { 
 
     anchors[i].className = ''; 
 
    } 
 
    
 
    event.target.className = 'active'; 
 
}

.active { 
 
    background-color:yellow; 
 
}

<div id="seconds"> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">15</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">30</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">60</a> 
 
    <a onclick="ChangeRefreshSeconds(event);" href="javascript:;">120</a> 
 
</div>