html-menu css javascript html

 horizontal menu 

<script>
$('a[class="tabsa"]').click(function(){
$(".tabsa").css('color','black');
$(".tabsa").css('background-color','');
$(this).css('color','red');
//$(this).css('background-color','#FDA352');
});
</script>



<style>
.tabsX { width:100%; display:inline-block;}
.tabs li{ font-size: 100%; display:inline; margin-right:20px;font-color:black; }
.tabs li a:link  { color: blue; text-decoration: none; }
.tabs li a:visited  { color: #000000; text-decoration: none; }
.tabs li a:hover  { color: red; text-decoration: none;}
.tabs li a:active { color: green; text-decoration: none;}
</style>




<div class="tabs">
<img src="img/topNavLeft.jpg" width="80" height="22"><a href="b5_sucInfo.php">
<ul class="tab-links" style='display:inline-block;font-weight: bold;'>
<li><a class="tabsa" href="002.html" target="search_iframe">援助個案 2</a></li>
<li><a class="tabsa" href="http://www.bing.com" target="search_iframe">最新消息</a></li>
<li><a class="tabsa" href="003.html" target="search_iframe">慈善活動 3</a></li>
<li><a class="tabsa" href="003.html" target="search_iframe">活動剪影</a></li>
<li><a class="tabsa" href="005.html" target="search_iframe">捐款記錄 5</a></li>
<li><a class="tabsa" href="004.html" target="search_iframe">心靈分享 4</a></li>
</ul>
<img src="img/topNavRight.jpg" width="320" height="22" class="banner">
</div>