选择栏目搜索的特效，很不错

作者: 龙哥 分类: 技术 发布时间: 2014-01-24 21:16 ė1,670 次浏览

 

把下面加入css

#tanchu-sousuo { margin-bottom: 10px; background-color: #EAEAEA }
#tanchu-sousuo .sousuo-nav { height: 40px; width: 96%; padding-right: 2%; padding-left: 2% }
#tanchu-sousuo .sousuo-nav ul { margin: 0px; padding: 0px }
#tanchu-sousuo .sousuo-nav ul li { text-align: center; float: left; line-height: 40px; height: 40px; width: 20%; color: #333; list-style-type: none }
#tanchu-sousuo .sousuo-nav ul .sousuo-nav-i { color: #FFF }
#tanchu-sousuo .form { height: 40px; margin: 0px; padding-right: 2%; padding-left: 2% }
#tanchu-sousuo .form input { margin: 0px; padding: 0px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none }
#tanchu-sousuo .form input[type=text] { border: 2px solid #999999; float: left; height: 30px; width: 80% }
#tanchu-sousuo .form input[type=submit] { border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-top-color: #999999; border-right-color: #999999; border-bottom-color: #999999; float: left; height: 34px; width: 18% }
#tanchu-sousuo .form[value="搜索"] { background: #DD6C52; color: #FFF }

把下面加入js文件


function sousuo(obj, sousuo) {
    var gu = obj.parentNode.getElementsByTagName("li");
    var hui = document.getElementById("id");
    for (i = 0; i < gu.length; i++) {
        if (obj == gu[i]) {
            gu[i].className = "sousuo-nav-i bj";
            if (obj == gu[0]) {
                document.getElementById("sousuo").value = "bbs_0";
            } else if (obj == gu[1]) {
                document.getElementById("sousuo").value = "article_0";
            } else if (obj == gu[2]) {
                document.getElementById("sousuo").value = "download_0";
            } else if (obj == gu[3]) {
                document.getElementById("sousuo").value = "search_0";
            }
        } else {
            gu[i].className = "";
        }
    }
}


把下面加入wml调用






<div id=”tanchu-sousuo”>





<div class=”sousuo-nav”>





<ul>





<li class=”sousuo-nav-i bj” onClick=”sousuo(this,’sousuo’)”>帖子</li>





<li onClick=”sousuo(this,’sousuo’)”>文章</li>





<li onClick=”sousuo(this,’sousuo’)”>模板</li>





<li onClick=”sousuo(this,’sousuo’)”>好友</li>





</ul>





</div>





<div class=”form”>





<form name=”fs” action=”/search.aspx” method=”get”>





<input type=”text” name=”key” size=”10″ value=”机领网”>





<input id=”sousuo” type=”hidden” name=”function” value=”bbs_0″>





<input type=”hidden” name=”sid” value=”[sid]”>





<input type=”hidden” name=”siteid” value=”1000″>





<input type=”hidden” name=”classid” value=”0″>





<input type=”submit” value=”搜索”>





</form>





</div>




 </div>







效果如图：


2014124



            

                
本文出自 俞凌龙博客，转载时请注明出处及相应链接。
本文永久链接: https://blog.jlwz.cn/97

                
                

			  
		

		        

			
			
        

        
        
	

	


Ɣ回顶部