مربع بحث تبديل تبويب TAOBAO المقلدة. قم بالتبديل إلى أي محتوى تريد البحث عنه. يمكن للأصدقاء المهتمين التحقق من الرمز أدناه.
<div> <div id = "searchbox"> <ul id = "tabbar"> <li tips = "الرجاء إدخال اسم المنتج"> المنتج </li> <li> <span> | </span> </li> <li tips = "الرجاء إدخال اسم المتجر"> shop </li> </ul> <div id = "tabbox" id = "الكلمة الرئيسية" name = "الكلمة الأساسية" lang = "zh-cn" type = "text" value = "الرجاء إدخال اسم المنتج"> <input value = "search" onfocus = "this.blur ()" type = "submit"> </pump> </siv> <div> <a href = "#" HREF = "#"> Shenggao Men's Shoes </a> <a href = "#"> <span> ملابس المرأة </a> </a> <a href = "#"> واقية من الشمس </a> <a href = "#"
.Search {الموضع: مطلق ؛ أعلى: 14px ؛ اليسار: 34 ٪ ؛ العرض: 477 بكسل ؛ _width: 477px ؛ الارتفاع: 81px ؛}. الكلمة الرئيسية A {font-size: 12px ؛ ارتفاع الخط: 18 بكسل ؛ اللون:#999 ؛ Padding: 0 4px ؛}. الكلمة الرئيسية A Span {color: #fb5004 ؛}. tab-bar li.current {color: #1d7ad9 ؛ خط الرصيف: جريئة ؛ الخلفية: url (../ images/trian_up.png) أسفل مركز عدم التكرار ؛ حشو bottom: 9px ؛}. Tab-bar li {width: 38px ؛ محاذاة النص: المركز ؛ اللون: #444 ؛ تعويم: اليسار. المؤشر: مؤشر ؛}. Tab-bar li.tab-line {width: 2px ؛ اللون: #C9C9C9 ؛ الهامش: 0 2px ؛}. Tab-box {border: 2px Solid #1d7ad9 ؛}. Text {color: #a9a9a9 ؛ العرض: 376 بكسل ؛ الارتفاع: 31 بكسل ؛ الحدود: لا شيء ؛ استولى النص: 10px ؛ تعويم: اليسار. الخطوط العريضة: لا شيء ؛ الحدود: 0 ؛}. زر {العرض: 97px ؛ الارتفاع: 32 بكسل ؛ محاذاة النص: المركز ؛ اللون: #ffff ؛ حجم الخط: 18 بكسل ؛ الخلفية: #1D7AD9 ؛ الحدود: لا شيء ؛ تعويم: اليسار ؛} <script type = "text/javaScript"> $ (function () {// Search Toggle $ ('#tabbar'). on ('click' ، 'li' ، function () {var tips = $ (this) .attr ('Tips') ؛ if (tips) {$ (this) .addClass ('current'). Siblings (). removeclass ('current') ؛ $ ('#keyword'). val (tips) ؛}}) ؛ </script>