hujung hadapan web
tutorial js
Cara melaksanakan berbilang tab dalam javascript dengan mendapatkan kemahiran class_javascript atribut tag html
Cara melaksanakan berbilang tab dalam javascript dengan mendapatkan kemahiran class_javascript atribut tag html
Contoh dalam artikel ini menerangkan cara javascript melaksanakan berbilang tab dengan mendapatkan kelas atribut teg html. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>原生javascript通过获取html标签属性class实现多选项卡</title>
<style type="text/css">
.tab {
clear: both;
margin: 20px auto;
padding: 10px;
width: 680px;
overflow: hidden;
}
.tab .tab-menu {
margin: 0;
padding: 0;
list-style: none;
}
.tab .tab-menu li {
display: inline;
margin: 0 2px 0 0;
}
.tab .tab-menu li a {
padding: 0 1em;
text-decoration: none;
color: #a80;
background: #fe5;
}
.tab .tab-menu li a:hover {
background: #fc0;
color: #540;
}
.tab .tab-menu .active {
}
.tab .tab-menu .active a {
padding-bottom: 2px;
font-weight: bold;
color: black;
background: #fc0;
}
.tab .tab-panel {
padding: 1em;
border: 2px solid #fc0;
background: #fff;
}
.tab .tab-panel h2 {
font-size: 1.5em;
color: #fc0;
}
.tab .tab-none {
display: none;
}
</style>
<script type="text/javascript">
function Tab(style, scope){
this.oItem = this.getByClass(style, scope);
this.init();
}
Tab.prototype = {
init: function(){
var that = this, menu, m;
for(var i = 0, len = this.oItem.length; i < len; i++){
menu = this.oItem[i].getElementsByTagName('li');
for(var j = 0, mLen = menu.length; j < mLen; j++){
m = menu[j];
m.index = j;
m.onmouseover = function(){that.focus(this);}
}
}
},
focus: function(o){
var par = o.parentNode.parentNode, panel = par.getElementsByTagName('div'),
btn = par.getElementsByTagName('li'), len = btn.length;
for(var i = 0; i < len; i++){
btn[i].className = '';
panel[i].className = this.changeClass(panel[i].className, 'tab-none', true);
}
o.className = 'active';
panel[o.index].className = this.changeClass(panel[o.index].className, 'tab-none', false);
},
changeClass: function(cl, cl2, add){
var flag;
if(cl.match(cl2) != null) flag = true;
if(add ^ flag) return flag ? cl.replace(cl2, '') : cl += ' ' + cl2;
return cl;
},
getByClass: function(cla, obj){
var obj = obj || document, arr = [];
if(document.getElementsByClassName){
return document.getElementsByClassName(cla);
} else {
var all = obj.getElementsByTagName('*');
for(var i = 0, len = all.length; i < len; i++){
if(all[i].className.match(cla) != null) arr.push(all[i]);
}
return arr;
}
}
}
window.onload = function(){
new Tab('tab-menu', null);
}
</script>
</head>
<body>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">111</a></li>
<li><a href="">122</a></li>
<li><a href="">133</a></li>
</ul>
<div class="tab-panel">
111
</div>
<div class="tab-panel tab-none">
122
</div>
<div class="tab-panel tab-none">
133
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">211</a></li>
<li><a href="">222</a></li>
<li><a href="">233</a></li>
</ul>
<div class="tab-panel">
211
</div>
<div class="tab-panel tab-none">
222
</div>
<div class="tab-panel tab-none">
233
</div>
</div>
<div class="tab">
<ul class="tab-menu">
<li class="active"><a href="">311</a></li>
<li><a href="">322</a></li>
<li><a href="">333</a></li>
</ul>
<div class="tab-panel">
311
</div>
<div class="tab-panel tab-none">
322
</div>
<div class="tab-panel tab-none">
333
</div>
</div>
</body>
</html>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
1389
52
Bagaimana untuk mengalih keluar tag HTML daripada rentetan dalam PHP?
Mar 23, 2024 pm 09:03 PM
PHP ialah bahasa skrip sebelah pelayan yang biasa digunakan yang digunakan secara meluas dalam pembangunan laman web dan pembangunan aplikasi back-end. Apabila membangunkan tapak web atau aplikasi, anda sering menghadapi situasi di mana anda perlu memproses tag HTML dalam rentetan. Artikel ini akan memperkenalkan cara menggunakan PHP untuk mengalih keluar tag HTML daripada rentetan dan memberikan contoh kod khusus. Mengapa anda perlu mengalih keluar tag HTML? Tag HTML selalunya disertakan semasa memproses input pengguna atau teks yang diperoleh daripada pangkalan data. Kadangkala kami ingin mengalih keluar tag HTML ini apabila memaparkan teks
Gantikan nama kelas elemen menggunakan jQuery
Feb 24, 2024 pm 11:03 PM
jQuery ialah perpustakaan JavaScript klasik yang digunakan secara meluas dalam pembangunan web Ia memudahkan operasi seperti pengendalian acara, memanipulasi elemen DOM, dan melaksanakan animasi pada halaman web. Apabila menggunakan jQuery, anda sering menghadapi situasi di mana anda perlu menggantikan nama kelas elemen Artikel ini akan memperkenalkan beberapa kaedah praktikal dan contoh kod tertentu. 1. Gunakan kaedah removeClass() dan addClass() jQuery menyediakan kaedah removeClass() untuk pemadaman
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest
Penjelasan terperinci tentang penggunaan Kelas PHP: Jadikan kod anda lebih jelas dan mudah dibaca
Mar 10, 2024 pm 12:03 PM
Apabila menulis kod PHP, menggunakan kelas adalah amalan yang sangat biasa. Dengan menggunakan kelas, kami boleh merangkum fungsi dan data yang berkaitan dalam satu unit, menjadikan kod lebih jelas, lebih mudah dibaca dan lebih mudah diselenggara. Artikel ini akan memperkenalkan penggunaan PHPClass secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik cara menggunakan kelas dalam projek sebenar untuk mengoptimumkan kod. 1. Cipta dan gunakan kelas Dalam PHP, anda boleh menggunakan kelas kata kunci untuk mentakrifkan kelas dan mentakrifkan sifat dan kaedah dalam kelas.
sintaks atribut bawah dalam CSS
Feb 21, 2024 pm 03:30 PM
Contoh sintaks atribut dan kod bawah dalam CSS Dalam CSS, atribut bawah digunakan untuk menentukan jarak antara elemen dan bahagian bawah bekas. Ia mengawal kedudukan elemen berbanding bahagian bawah elemen induknya. Sintaks atribut bawah adalah seperti berikut: elemen{bottom:value;} dengan elemen mewakili elemen yang gaya akan digunakan dan nilai mewakili nilai bawah yang akan ditetapkan. nilai boleh menjadi nilai panjang tertentu, seperti piksel
Pengenalan kepada sifat-sifat Benang Keputusasaan Hearthstone
Mar 20, 2024 pm 10:36 PM
Thread of Despair ialah kad yang jarang ditemui dalam karya agung Blizzard Entertainment "Hearthstone" dan berpeluang untuk diperolehi dalam pek kad "Wizbane's Workshop". Boleh menggunakan 100/400 mata habuk misteri untuk mensintesis versi biasa/emas. Pengenalan kepada sifat-sifat Thread of Despair Hearthstone: Ia boleh diperolehi dalam pek kad bengkel Wizbane dengan peluang, atau ia juga boleh disintesis melalui habuk misteri. Jarang: Jenis Jarang: Kelas Ejaan: Death Knight Mana: 1 Kesan: Memberi semua minion Deathrattle: Menawarkan 1 kerosakan kepada semua minion
Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah
Jan 05, 2024 pm 01:37 PM
Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu?
Feb 29, 2024 am 09:03 AM
Bagaimana untuk mengetahui sama ada elemen jQuery mempunyai atribut tertentu? Apabila menggunakan jQuery untuk mengendalikan elemen DOM, anda sering menghadapi situasi di mana anda perlu menentukan sama ada sesuatu elemen mempunyai atribut tertentu. Dalam kes ini, kita boleh melaksanakan fungsi ini dengan mudah dengan bantuan kaedah yang disediakan oleh jQuery. Berikut akan memperkenalkan dua kaedah yang biasa digunakan untuk menentukan sama ada elemen jQuery mempunyai atribut khusus, dan melampirkan contoh kod tertentu. Kaedah 1: Gunakan kaedah attr() dan operator jenis // untuk menentukan sama ada elemen mempunyai atribut tertentu
