Home > Article > Web Front-end > How to make this page? It would be best if you could provide some code. Thank you very much_html/css_WEB-ITnose
How to make this page? It would be best if you could provide some code. Thank you very much_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:11:361024browse
The picture is not displayed when inserted, 5555
Open this page to see the picture http://img.my.csdn.net/uploads/201205/24/1337851311_6863.jpg
How do I use tab myself? I can't get the effect, I hope it switches when I click it, but it doesn't switch when I slide the mouse~
Thank you
Reply to the discussion (solution)
Refer to jquery's
<!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> Refer to jquery's
HTML code
8b05045a5be5764f313ed5b9168a17e6
100db36a723c770d327fc0aef2ce13b1
" />
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Explain the meaning of the statement_html/css_WEB-ITnoseNext article：Explain the meaning of the statement_html/css_WEB-ITnose