a标签 href onclick调用函数的问题_html/css_WEB-ITnose
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a></p> </div></body></html>上面这样调用可以执行showdiv()
但是用onclick如下就不能执行，这是为什么呢？求解.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; // document.getElementById("pn").style.height='80px'; document.getElementById("strHref").href = "javascript:hidediv();"; document.getElementById("strHref").innerHTML = "收起-"; } function hidediv() { document.getElementById("hpn").style.display = "none"; // document.getElementById("pn").style.height='60px'; document.getElementById("strHref").href = "javascript:showdiv();"; document.getElementById("strHref").innerHTML = "更多选项+"; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="#" id="strHref" class="btn-slide" onclick="showdiv()">更多选项+</a></p> </div></body></html>
回复讨论(解决方案)
第二种：
你在点击的时候，给a标签的href添加了URL了，然后就执行了hidediv();方法，所以，它是很快的显示又隐藏了
其实这个不不用写成两个方法，你就写一个方法，然后方法内判断元素是显示还是隐藏就可以了
以下是我给你提供的代码：
手机 - 商品筛选
网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA）
谢谢，感谢方法，但我主要还是不懂那个onclick事件怎么修改才能正确显示..
这样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; } a:focus { outline: none; } #pn { background: #e8e8e8; width: 600px; display: block; margin: 0 auto; padding: 5px; font-size: 9pt; height: auto; } .slide { margin: 0; padding: 0; width: 600px; border-top: solid 4px gray; margin: 0 auto; } .btn-slide { background: gray; text-align: center; width: 120px; height: 30px; padding: 10px 10px 0 0; margin: 0 auto; display: block; color: #fff; text-decoration: none; } </style> <script type="text/javascript"> function showdiv() { document.getElementById("hpn").style.display = "block"; document.getElementById("strHref").innerHTML = "收起-"; document.getElementById("strHref").onclick=hidediv; } function hidediv() { document.getElementById("hpn").style.display = "none"; document.getElementById("strHref").innerHTML = "更多选项+"; document.getElementById("strHref").onclick=showdiv; } </script></head><body> <div> <div id="pn"> <p> 手机 - 商品筛选</p> <p> 网络： 移动4G（TD-LTE ） 联通4G（TD-LTE） 联通3G（WCDMA） </p> <div id="hpn" style="display: none"> <p> 价格： 5000以上 4000-4999 3000-3999 2000-2999 </p> <p> 特点： JDPhone计划 "0"元购机 防水 长待机 1080P全高清屏 </p> </div> </div> <p class="slide"> <a href="javascript:;" id="strHref" class="btn-slide" onclick="showdiv();return false">更多选项+</a></p> </div></body></html>
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
1660
14
1417
52
1311
25
1261
29
1234
24
Adakah HTML mudah belajar untuk pemula?
Apr 07, 2025 am 12:11 AM
HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.
Memahami HTML, CSS, dan JavaScript: Panduan Pemula
Apr 12, 2025 am 12:02 AM
WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Apakah contoh tag permulaan dalam html?
Apr 06, 2025 am 12:04 AM
Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
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: 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.
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.
