javascript - 使用html单击后如何为单行源代码着色？

Question

像这样对源代码进行着色(通过 GeSHi 或类似 http://tohtml.com 的工具):

<pre style='color:#000000;background:#ffffff;'>
<ol>
<li><a href="#1"><span style='color:#004a43; '>#</span><span style='color:#004a43; '>include </span><span style='color:#800000; '>&lt;</span><span style='color:#40015a; '>iostream</span><span style='color:#800000; '>></span></a></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>using</span> <span style='color:#800000; font-weight:bold; '>namespace</span> <span style='color:#666616; '>std</span><span style='color:#800080; '>;</span></li></li>
<li> </li>
<li><span style='color:#800000; font-weight:bold; '>int</span> <span style='color:#400000; '>main</span><span style='color:#808030; '>(</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>int</span> intNum <span style='color:#808030; '>=</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li>    </li>
<li>    <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800000; font-weight:bold; '>while</span> <span style='color:#808030; '>(</span>intNum <span style='color:#808030; '>!</span><span style='color:#808030; '>=</span> <span style='color:#008c00; '>42</span><span style='color:#808030; '>)</span> <span style='color:#800080; '>{</span></li>
<li>        <span style='color:#603000; '>cout</span> <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> intNum <span style='color:#808030; '>&lt;</span><span style='color:#808030; '>&lt;</span> <span style='color:#800000; '>"</span><span style='color:#0f69ff; '>\n</span><span style='color:#800000; '>"</span><span style='color:#800080; '>;</span></li>
<li>        <span style='color:#603000; '>cin</span> <span style='color:#808030; '>></span><span style='color:#808030; '>></span> intNum<span style='color:#800080; '>;</span></li>
<li>    <span style='color:#800080; '>}</span></li>
<li> </li>
<li>    <span style='color:#800000; font-weight:bold; '>return</span> <span style='color:#008c00; '>0</span><span style='color:#800080; '>;</span></li>
<li> </li>
<li><span style='color:#800080; '>}</span></li>
</ol>
</pre>

截图:

我想创建一种机制，可以对用户点击的行进行着色。我知道我需要更改特定 li 元素的背景颜色。我想知道我怎样才能做到这一点。

添加到每一行是否可以:

<li <强> id='id1' > <强> <a href="javascript:color('1')">...</a> </li>

<li <强> id='id2' > <强> <a href="javascript:color('2')">...</a> </li>

• 是否有必要为每个 li 元素添加唯一的 id？
• 是否可以向 JS 函数传递某种 id/“this 指针”/无论什么将指向 JS 函数，应该更改哪个元素？

编辑:

还有一个要求:毕竟，我需要将有关点击哪一行的信息传递给 URL。我想在不重新加载网页的情况下执行此操作，因此我想添加类似 #NUMBER_OF_CLICKED_LINE 的内容

Answer 1

简单突出显示列表元素的一种方法是使用:

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
    };  
}

JS Fiddle demo .

关于需要将点击行作为散列附加到 URL(JS Fiddle 无法轻松演示):

var ol = document.getElementsByTagName('ol')[0];
var lis = ol.getElementsByTagName('li');
var highlight = '#ffa';

for (i=0;i<lis.length;i++){
        lis[i].setAttribute('data-Index',i);
    lis[i].onclick = function(){
        this.style.backgroundColor = highlight;
        document.location.hash = 'line=' + this.getAttribute('data-index');
    };  
}

JS Fiddle demo .