<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul{padding:16px;width:480px;margin:60px auto}
ul,a{border:1px solid #222;background:#369 linear-gradient(#369,#111);background-image:-moz-linear-gradient(#369,#111);background-image:-webkit-gradient(linear,left top,left bottom,from(#369),to(#111));background-image:-webkit-linear-gradient(#369,#111);background-image:-o-linear-gradient(#369,#111);background-image:-ms-linear-gradient(#369,#111);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;-webkit-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;box-shadow:0 1px 1px #777,0 1px 0 #666 inset}
ul li{display:inline}
ul li a{color:#fefefe;text-decoration:none;margin:0;padding:10px 14px 10px 14px}
ul li a:hover{border:1px solid #FFFFFF}
ul li a.selected{border:1px solid #222;background:#0FA linear-gradient(#0FA,#111);background-image:-moz-linear-gradient(#0FA,#111);background-image:-webkit-gradient(linear,left top,left bottom,from(#0FA),to(#111));background-image:-webkit-linear-gradient(#0FA,#111);background-image:-o-linear-gradient(#0FA,#111);background-image:-ms-linear-gradient(#0FA,#111);-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;-webkit-box-shadow:0 1px 1px #777,0 1px 0 #666 inset;box-shadow:0 1px 1px #777,0 1px 0 #666 inset}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document)
.ready(function () {
var array = ["Google","Yandex","Bing","Baidu","Mail.ru"];
$.each(array,function() {
$('<li/>').append($('<a/>', {
href: '#',
text: this,
click : function (event)
{
event.preventDefault()
var a = $('li a');
a.removeClass('selected');
$(this).addClass('selected')
}
})).appendTo($("#searchresult"));
});
});
</script>
</head>
<body>
<ul id="searchresult">
</ul>
</body>
</html>