ホームページ > 記事 > ウェブフロントエンド > このページの作り方を教えていただければ幸いです_html/css_WEB-ITnose
このページの作り方を教えていただければ幸いです_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:11:361024ブラウズ
挿入しても画像が表示されません、5555
このページを開いて画像を確認してください http://img.my.csdn.net/uploads/201205/24/1337851311_6863.jpg
いくらやっても効果が得られませんタブの使い方。マウスがスライドすると切り替わらず、クリックすると切り替わるといいですね〜
ありがとうございます
ディスカッション (解決策) への返信
jquery を参照してください
<!DOCTYPE html><html> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" /> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"><!-- .wrapper { margin:80px auto; width:400px; height:300px; border:1px solid #aaa; } .head { height:30px; background:#ddd; border-bottom:1px solid #aaa; line-height:30px; text-align:center; font-size:14px; font-weight:bold; } .head li { float:left; width:100px; } .head li.cur { position:relative; top:0; _top:1px; left:1px; background:#fff; border:1px solid #aaa; border-bottom:none; overflow:hidden; } .head li a { display:block; width:100px; } .con { clear:both; padding:10px; } .con li { display:none; } .con .db { display:block; } a { outline:none; } --></style> </head> <body> <div class="wrapper"> <ul class="head"> <li class="cur"><a href="#" hidefocus="hidefocus">Asp.net</a></li> <li><a href="#" hidefocus="hidefocus">PHP</a></li> <li><a href="#" hidefocus="hidefocus">mySql</a></li> </ul> <ul class="con"> <li class="db">1</li> <li>2</li> <li>3</li> </ul> </div> <script> $('.head li').click(function(){ $(this).addClass('cur').siblings().removeClass('cur'); $('.con li:eq('+$(this).index()+')').show().siblings().hide(); return false }) </script> </body></html> jquery を参照してくださいhtmlコード＆lt; doctype html＆lt;
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。