hujung hadapan web
tutorial js
Melaksanakan tab universal berdasarkan JavaScript (kepelbagaian yang kuat)_kemahiran javascript
Melaksanakan tab universal berdasarkan JavaScript (kepelbagaian yang kuat)_kemahiran javascript
Tab digunakan dalam sejumlah besar laman web Walaupun bentuknya berbeza, tujuan yang ingin dicapai adalah sama satu Contoh kod tab adalah sangat serba boleh, jadi saya akan berkongsi dengan anda di bawah.
Contoh kod adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>js实现的可以通用的选项卡代码实例</title>
<style type="text/css">
body {text-align:center;}
.tab1, .tab2
{
width:350px;
margin:0 5px;
background:#CC9933;
opacity:0.5;
border-radius:5px 5px 5px 5px;
box-shadow:#CCC 4px 4px 4px;
text-align:left;
float:left;
display:inline;
}
.name
{
list-style:none;
overflow:hidden;
}
.name li
{
width:90px;
font:bold 16px/30px Verdana, Geneva, sans-serif;
background:#669900;
text-align:center;
border-radius:5px 5px 5px;
margin-right:5px;
float:left;
display:inline;
cursor:pointer;
}
li.selected{background:#FF9900;}
.content li
{
height:500px;
display:none;
}
</style>
<script type="text/javascript">
/**
* 事件处理通用函数
*/
var EventUtil={
getEvent:function(event)
{
return event ? event : window.event;
},
getTarget:function(event)
{
return event.target||event.srcElement;
},
addHandler:function(element,type,handler)
{
if(element.addEventListener)
{
element.addEventListener(type,handler,false);
}
else if(element.attachEvent)
{
element.attachEvent("on"+type,handler);
}
else
{
element["on"+type] = handler;
}
}
};
/**
* 选项卡通用函数
*/
// 传入参数inClassName设定为绑定的选项卡类名，参数triggerType设定为触发切换的类型
function tabSwitch(inClassName,triggerType){
//取得全部选项卡区域
if(document.querySelectorAll)
{
var tabs=document.querySelectorAll("."+inClassName);
}
else
{
var divs=document.getElementsByTagName("div");
var tabs = new Array();
for(var k=0,lenDiv=divs.length;k<lenDiv;k++)
{
if(divs[k].className.indexOf(inClassName)>-1)
{
tabs.push(divs[k]);
}
}
}
//为每个选项卡建立切换功能
for(var j=0,len=tabs.length; j<len; j++)
{
//获取标题和内容列表
var tab = tabs[j];
//使用私有作用域为每个选项卡建立切换
(function(){
var nameUl = tab.getElementsByTagName("ul")[0];
var content = tab.getElementsByTagName("ul")[1];
//初始化选项卡
nameUl.getElementsByTagName("li")[0].className = "selected";
content.getElementsByTagName("li")[0].style.display = "block";
//添加事件委托
EventUtil.addHandler(nameUl,triggerType,function(event)
{
//获取事件对象
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//选项卡切换
if(target.nodeName.toLowerCase() == "li")
{
//分别取得标题列表项和内容列表项
var nameList = nameUl.getElementsByTagName("li");
var contentList = content.getElementsByTagName("li");
//标题添加selected类，并显示内容
for(var i=0,len=nameList.length; i<len; i++)
{
nameList[i].className = "";
contentList.style.display = "none";
if(nameList == target)
{
nameList.className = "selected";
contentList.style.display = "block";
}
}
}
});
})();
}
}
window.onload=function()
{
//设置选项卡切换方式
tabSwitch("tab1","click");
tabSwitch("tab2","mouseover");
}
</script>
</head>
<body>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab1">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab1"</em>项目一内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目二内容,通过<em>"click"</em>触发</li>
<li>类为<em>"tab1"</em>项目三内容,通过<em>"click"</em>触发</li>
</ul>
</div>
<div class="tab2">
<ul class="name">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ul class="content">
<li>类为<em>"tab2"</em>项目一内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>项目二内容,通过<em>"mouseover"</em>触发</li>
<li>类为<em>"tab2"</em>"项目三内容,通过<em>"mouseover"</em>触发</li>
</ul>
</div>
</body>
</html> Kod di atas melaksanakan fungsi tab Berikut ialah pengenalan ringkas kepada proses pelaksanaan.
1. Prinsip pelaksanaan:
Ia mungkin kelihatan seperti banyak kod, tetapi prinsipnya sebenarnya sangat mudah Kami hanya akan memperkenalkan secara ringkas prinsip di sini untuk butiran, anda boleh merujuk kepada komen kod dan bergantung pada pemikiran anda sendiri. Dalam keadaan lalai, tajuk tab dipaparkan, dan tajuk pertama diberikan kelas gaya yang ditentukan Hanya kandungan tab pertama dipaparkan, dan yang lain disembunyikan Ini dicapai . Setiap tajuk tab akan didaftarkan dengan pengendali acara tertentu Apabila operasi klik atau leret dilakukan, suis yang sepadan boleh direalisasikan, terutamanya melalui traversal. Sila rujuk komen kod.
2. Kod ulasan:
1.var EventUtil={}, mengisytiharkan objek literal, yang secara dalaman melaksanakan operasi mendapatkan objek peristiwa, objek sumber peristiwa dan pengikatan fungsi pemprosesan peristiwa, dan serasi dengan penyemak imbas utama.
2. getEvent:function(event){return event: window.event;}, dapatkan objek acara, serasi dengan semua penyemak imbas utama.
3.getTarget:function(event){return event.target||event.srcElement;}, dapatkan objek sumber acara, serasi dengan penyemak imbas utama.
4.addHandler:function(element,type,handler){}, fungsi pemprosesan acara berdaftar adalah serasi dengan semua penyemak imbas utama.
5.function tabSwitch(inClassName,triggerType){}, fungsi ini boleh mendaftarkan fungsi pemprosesan peristiwa yang ditentukan untuk objek yang ditentukan. Parameter pertama ialah nama kelas gaya, yang digunakan untuk mendapatkan objek dengan nama sedemikian Dua ialah jenis acara.
6.if(document.querySelectorAll), digunakan untuk menentukan sama ada penyemak imbas menyokong fungsi querySelectorAll.
7.var tabs=document.querySelectorAll("." inClassName), jika disokong, mendapatkan objek dengan nama kelas yang ditentukan.
8.var divs=document.getElementsByTagName("div"), dapatkan koleksi objek div.
9.var tabs=new Array(), mencipta tatasusunan untuk menyimpan objek div dengan kelas gaya tertentu.
10.for(var k=0,lenDiv=divs.length;k
12. tabs.push(divs[k]), simpan div ini ke dalam array.
13.for(var j=0,len=tabs.length;j
15.(function(){})(), mengisytiharkan fungsi tanpa nama dan melaksanakannya.
16.var nameUl=tab.getElementsByTagName("ul")[0], dapatkan yang pertama dalam koleksi ul, iaitu bahagian tajuk tab.
17.var content=tab.getElementsByTagName("ul")[1], dapatkan bahagian kandungan tab.
18.nameUl.getElementsByTagName("li")[0].className="selected", tetapkan nilai kelas gaya tajuk pertama dalam bahagian tajuk tab kepada dipilih.
19.content.getElementsByTagName("li")[0].style.display="block", tetapkan bahagian kandungan pertama tab untuk dipaparkan.
20.EventUtil.addHandler(nameUl,triggerType,function(event){}), fungsi ini ialah bahagian teras dalam melaksanakan tab dan mempunyai tiga parameter Parameter pertama ialah objek ul bahagian tajuk dan yang kedua ialah jenis acara , fungsi ketiga ialah fungsi pengendalian acara untuk didaftarkan.
21.var event=EventUtil.getEvent(event), dapatkan objek acara.
22.var target=EventUtil.getTarget(event), dapatkan objek sumber acara.
23.if(target.nodeName.toLowerCase()=="li"), tentukan sama ada nama label objek sumber acara ialah li.
24.var nameList=nameUl.getElementsByTagName("li"), mendapatkan koleksi elemen li dalam bahagian tajuk tab.
25.var contentList=content.getElementsByTagName("li"), dapatkan gabungan elemen li dalam bahagian kandungan tab.
26.for(var i=0,len=nameList.length;i
28.contentList.style.display="none", sembunyikan li dalam bahagian kandungan setiap tab.
29.if(nameList==target), jika tajuk li indeks yang ditentukan ialah objek sumber peristiwa, iaitu, li yang sedang diklik oleh tetikus atau li yang diluncurkan tetikus.
30.nameList.className="selected", kemudian tambahkan kelas gaya yang ditentukan padanya.
31.contentList.style.display="block" akan memaparkan kandungan yang sepadan dengan indeks.
Kandungan di atas diperkenalkan dengan agak terperinci, dengan kod dan ulasan saya harap ia akan membantu semua orang dalam mempelajari tentang pelaksanaan tab.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
Tutorial Persediaan API Carian Google Custom
Mar 04, 2025 am 01:06 AM
Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y
8 plugin susun atur halaman jquery yang menakjubkan
Mar 06, 2025 am 12:48 AM
Leverage JQuery untuk Layouts Laman Web yang mudah: 8 Plugin Essential JQuery memudahkan susun atur laman web dengan ketara. Artikel ini menyoroti lapan plugin jQuery yang kuat yang menyelaraskan proses, terutamanya berguna untuk penciptaan laman web manual
Apa itu ' ini ' Dalam JavaScript?
Mar 04, 2025 am 01:15 AM
Mata teras Ini dalam JavaScript biasanya merujuk kepada objek yang "memiliki" kaedah, tetapi ia bergantung kepada bagaimana fungsi dipanggil. Apabila tidak ada objek semasa, ini merujuk kepada objek global. Dalam penyemak imbas web, ia diwakili oleh tetingkap. Apabila memanggil fungsi, ini mengekalkan objek global; tetapi apabila memanggil pembina objek atau mana -mana kaedahnya, ini merujuk kepada contoh objek. Anda boleh mengubah konteks ini menggunakan kaedah seperti panggilan (), memohon (), dan mengikat (). Kaedah ini memanggil fungsi menggunakan nilai dan parameter yang diberikan. JavaScript adalah bahasa pengaturcaraan yang sangat baik. Beberapa tahun yang lalu, ayat ini
Bina Aplikasi Web Ajax anda sendiri
Mar 09, 2025 am 12:11 AM
Jadi di sini anda, bersedia untuk mempelajari semua perkara ini yang dipanggil Ajax. Tetapi, apa sebenarnya? Istilah Ajax merujuk kepada kumpulan teknologi longgar yang digunakan untuk membuat kandungan web yang dinamik dan interaktif. Istilah Ajax, yang asalnya dicipta oleh Jesse J
Tingkatkan pengetahuan jQuery anda dengan penonton sumber
Mar 05, 2025 am 12:54 AM
JQuery adalah rangka kerja JavaScript yang hebat. Walau bagaimanapun, seperti mana -mana perpustakaan, kadang -kadang perlu untuk mendapatkan di bawah tudung untuk mengetahui apa yang sedang berlaku. Mungkin kerana anda mengesan bug atau hanya ingin tahu tentang bagaimana jQuery mencapai UI tertentu
10 helaian cheat mudah alih untuk pembangunan mudah alih
Mar 05, 2025 am 12:43 AM
Siaran ini menyusun helaian cheat berguna, panduan rujukan, resipi cepat, dan coretan kod untuk perkembangan aplikasi Android, BlackBerry, dan iPhone. Tiada pemaju harus tanpa mereka! Panduan Rujukan Gesture Touch (PDF) Sumber yang berharga untuk desig
Bagaimana saya membuat dan menerbitkan perpustakaan JavaScript saya sendiri?
Mar 18, 2025 pm 03:12 PM
Artikel membincangkan membuat, menerbitkan, dan mengekalkan perpustakaan JavaScript, memberi tumpuan kepada perancangan, pembangunan, ujian, dokumentasi, dan strategi promosi.
