Change color of content of `<li>` tag when selected
This is my list:
<ul id="list">
<li id="g_commondata" value="g_commondata.html">
<a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value'))">Variable : g_commondata</a>
</li>
<li id="gs_data" value="gs_data.html">
<a onclick="setPictureFileName(document.getElementById('gs_data').getAttribute('value'))">Variable : gs_data</a>
</li>
<li id="leak" value="leak.html">
<a onclick="setPictureFileName(document.getElementById('leak').getAttribute('value'))">Variable : leak</a>
</li>
<li id="Dfun1" value="Dfun1.html">
<a onclick="setPictureFileName(document.getElementById('Dfun1').getAttribute('value'))">Function : Dfun1</a>
</li>
<li id="main" value="main.html">
<a onclick="setPictureFileName(document.getElementById('main').getAttribute('value'))">Function : main</a>
</li>
<li id="Afun1" value="Afun1.html">
<a onclick="setPictureFileName(document.getElementById('Afun1').getAttribute('value'))">Function : Afun1</a>
</li>
<li id="Afun2" value="Afun2.html">
<a onclick="setPictureFileName(document.getElementById('Afun2').getAttribute('value'))">Function : Afun2</a>
</li>
<li id="Afun3" value="Afun3.html">
<a onclick="setPictureFileName(document.getElementById('Afun3').getAttribute('value'))">Function : Afun3</a>
</li>
<li id="Afun4" value="Afun4.html">
<a onclick="setPictureFileName(document.getElementById('Afun4').getAttribut开发者_运维技巧e('value'))">Function : Afun4</a>
</li>
</ul>
How can I change the color of the selected item at run time?
This may solve your problem:
CSS:
.text_color {color:red}//Choose your color
JQUERY:
$('#list li').click(function(){
$(this).parent().find('li.text_color').removeClass('text_color');
$(this).addClass('text_color');
});
In vanilla JavaScript:
<li id="g_commondata" value="g_commondata.html">
<a onclick="setPictureFileName(document.getElementById('g_commondata').getAttribute('value')); this.parentNode.style.color = '#FF0000';">Variable : g_commondata</a>
</li>
Likewise for all <LI>
. I recommend that you learn and start using a JavaScript library such as jQuery, Prototype or MooTools.
精彩评论