<script language="javascript"> function setSearchOptions(idElement){ /* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */ tot_tab = 3; tab = document.getElementById('tab'+idElement); search_option = document.getElementById('searchopt'); for(i=1; i<=3; i++){ if(i==idElement){ tab.setAttribute("class","selected"); search_option.value=idElement; } else { document.getElementById('tab'+i).setAttribute("class",""); } } } </script> <style type="text/css"> body {font-family:"Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#555555;} #main{width:600px; margin:0 auto; margin-top:60px;} a{color:#0066CC;} h1{color:#000000;} form, input, h1, p{padding:0; margin:0; border:0;} p{padding:6px 0 20px 0;} #search-bar{padding:10px; background:#90b557; clear:both;} #search-bar .search-style{font-size:16px; color:#999999; border:solid 1px #CCCCCC; padding:4px;} ul.search-options, ul.search-options li{padding:0; border:0; margin:0; list-style:none;} ul.search-options{clear:both;} ul.search-options li a{float:left; margin-right:1px; width:auto; background:#b2d281; padding:8px; color:#3b5d14; text-decoration:none; font-weight:bold;} .selected a{background:#90b557; color:#FFFFFF;} ul.search-options li.selected a{background:#90b557; color:#FFFFFF;} </style> <div id="main"> <h1>Woork: Tabbed search bar</h1> <ul class="search-options"> <li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li> <li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li> <li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li> </ul> <div id="search-bar"> <form id="form1" name="form1" method="post" action=""> <input name="" type="text" class="search-style" id="searchq" size="40"/> <input type="hidden" name="searchopt" id="searchopt" /> </form> </div>

 Kodu Kopyala

Hata Bildir | Tavsiye Et
 

Bu içeriğe oy verin: 1 2 3 4 5 6 7 8 9 10

Yorumlar / Yeni Yorum Yaz

	çalışmıyo / Tabbed Search Bar - mehmet - 11.08.2010  / Cevapla
	textboxta yazı yazoyorum enter e basınca bişe göstermiyo bozuk

1 - 26 arası / 1 toplam yorum