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

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

 

把下面加入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

Ɣ回顶部