怎么把这两段合并为一个方法呢？他们结构是一样的_html/css_WEB-ITnose
结构：
.s-content >.tab
.s-content >.inner
想要的结果是在不同大层里点击tab切换对应顺序的inner
//网址tab var wTag=$("#s_nall_tabs a"); wTag.each(function(){ $(this).click(function(i){ wTag.removeClass("tab-on"); var index=$("#s_nall_tabs a").index(this); $(this).addClass("tab-on"); $("#s_nall_tabs_con .inner").hide(); $("#s_nall_tabs_con .inner").eq(index).show(); }) }); //网址tab var sTag=$(".s-gbuy-hd a"); sTag.each(function(){ $(this).click(function(i){ sTag.removeClass("tab-on"); var index=$(".s-gbuy-hd a").index(this); $(this).addClass("tab-on"); $(".s-gbuy .inner").hide(); console.log(index); $(".s-gbuy .inner").eq(index).show(); }) });
回复讨论(解决方案)
var wTag=$("#s_nall_tabs a,.s-gbuy-hd a");
wTag.each(function(){
$(this).click(function(i){
wTag.removeClass("tab-on");
var index=$("#s_nall_tabs a").index(this);
$(this).addClass("tab-on");
$("#s_nall_tabs_con .inner").hide();
$("#s_nall_tabs_con .inner").eq(index).show();
})
});
var wTag=$("#s_nall_tabs a,.s-gbuy-hd a");
wTag.each(function(){
$(this).click(function(i){
wTag.removeClass("tab-on");
var index=$("#s_nall_tabs a").index(this);
$(this).addClass("tab-on");
$("#s_nall_tabs_con .inner").hide();
$("#s_nall_tabs_con .inner").eq(index).show();
})
});
哇，原来可以这样。。。。我感动哭了要。。。。谢谢 ~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab</title></head><body> <style> .tab-on { background-color: green; } </style> <div class="s-content"> <div class="tab"> <a class="tab-on" href="#" id="tab-1">Tab-1</a> <a href="#" id="tab-2">Tab-2</a> <a href="#" id="tab-3">Tab-3</a> </div> <div class="inner" data-for="tab-1"> <p>tab-1 content!</p> </div> <div class="inner" data-for="tab-2" style="display: none;"> <p>tab-2 content!</p> </div> <div class="inner" data-for="tab-3" style="display: none;"> <p>tab-3 content!</p> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script> $( ".s-content .tab a" ).click( function () { var tabIndex = $( this ).index(); $( this ).addClass( "tab-on" ); // 给点击的 tab 加上 “.tab-on” $( this ).siblings().removeClass( "tab-on" ); // 其他的 tab 去掉 “.tab-on” $( ".s-content .inner" ).hide().eq( tabIndex ).show(); } ); </script></body></html>
var wTag=$(".s-content .tab"); wTag.each(function(){ $(this).click(function(i){ var p=$(this).parents(".s-content"); var tabs=p.find(".tab"); var index=tabs.index(this); tabs.removeClass("tab-on"); $(this).addClass("tab-on"); p.find(".inner").hide(); p.find(".inner").eq(index).show(); }) });再修理好点~
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab</title></head><body> <style> .tab-on { background-color: green; } </style> <div class="s-content"> <div class="tab"> <a class="tab-on" href="#" id="tab-1">Tab-1</a> <a href="#" id="tab-2">Tab-2</a> <a href="#" id="tab-3">Tab-3</a> </div> <div class="inner" data-for="tab-1"> <p>tab-1 content!</p> </div> <div class="inner" data-for="tab-2" style="display: none;"> <p>tab-2 content!</p> </div> <div class="inner" data-for="tab-3" style="display: none;"> <p>tab-3 content!</p> </div> </div> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <script> $( ".s-content .tab a" ).click( function () { var tabIndex = $( this ).index(); $( this ).addClass( "tab-on" ); // 给点击的 tab 加上 “.tab-on” $( this ).siblings().removeClass( "tab-on" ); // 其他的 tab 去掉 “.tab-on” $( ".s-content .inner" ).hide().eq( tabIndex ).show(); } ); </script></body></html>这个当页面有多个s-content 就不行了的
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
1664
14
1421
52
1315
25
1266
29
1239
24
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
HTML, CSS, dan JavaScript: Alat penting untuk pemaju web
Apr 09, 2025 am 12:12 AM
HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.
HTML: Struktur, CSS: Gaya, JavaScript: Tingkah Laku
Apr 18, 2025 am 12:09 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: 1. HTML mentakrifkan struktur laman web, 2. CSS mengawal gaya laman web, dan 3. JavaScript menambah tingkah laku dinamik. Bersama -sama, mereka membina kerangka, estetika dan interaktiviti laman web moden.
Masa Depan HTML, CSS, dan JavaScript: Trend Pembangunan Web
Apr 19, 2025 am 12:02 AM
Trend masa depan HTML adalah semantik dan komponen web, trend masa depan CSS adalah CSS-in-JS dan CSShoudini, dan trend masa depan JavaScript adalah webassembly dan tanpa pelayan. 1. Semantik HTML meningkatkan kebolehcapaian dan kesan SEO, dan komponen web meningkatkan kecekapan pembangunan, tetapi perhatian harus dibayar kepada keserasian penyemak imbas. 2. CSS-in-JS meningkatkan fleksibiliti pengurusan gaya tetapi boleh meningkatkan saiz fail. Csshoudini membolehkan operasi langsung rendering CSS. 3.Webassembly mengoptimumkan prestasi aplikasi penyemak imbas tetapi mempunyai keluk pembelajaran yang curam, dan tanpa pelayan memudahkan pembangunan tetapi memerlukan pengoptimuman masalah permulaan sejuk.
Masa Depan HTML: Evolusi dan Trend dalam Reka Bentuk Web
Apr 17, 2025 am 12:12 AM
Masa depan HTML penuh dengan kemungkinan yang tidak terhingga. 1) Ciri -ciri dan piawaian baru akan merangkumi lebih banyak tag semantik dan populariti komponen web. 2) Trend reka bentuk web akan terus berkembang ke arah reka bentuk yang responsif dan boleh diakses. 3) Pengoptimuman prestasi akan meningkatkan pengalaman pengguna melalui pemuatan imej yang responsif dan teknologi pemuatan malas.
HTML vs CSS vs JavaScript: Gambaran Keseluruhan Perbandingan
Apr 16, 2025 am 12:04 AM
Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.
HTML: Membina struktur laman web
Apr 14, 2025 am 12:14 AM
HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.
Peranan HTML: Penstrukturan Kandungan Web
Apr 11, 2025 am 12:12 AM
Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.
