利用jquery实现网站中对应栏目下面内容切换效果。
Posted 人在钱途
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jquery实现网站中对应栏目下面内容切换效果。相关的知识，希望对你有一定的参考价值。
<!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> <script src="js/jquery.js"></script> </head> <style type="text/css"> .tabpad {display:none;} .show{display:block;} .tabbt-on a{color: red;} .ul-1 li a:hover{color: blue;} </style> <body> <div class="con4"> <div id="ghyw"> <ul class="tabul"> <li class="tabbt-on"> <a href="#" tabindex="0" target="_blank">组织建设</a> </li> <li class=""> <a href="#" tabindex="1" class="btn-2" target="_blank">民主管理</a> </li> </ul> <div class="tabpad" > <ul class="ul-1"> <li> <a>测试一下111</a> </li> <li> <a>测试一下222</a> </li> <li> <a>测试一下333</a> </li> </ul> </div> <div class="tabpad"> <ul class="ul-1"> <li> <a>测试一下444</a> </li> <li> <a>测试一下555</a> </li> <li> <a>测试一下666</a> </li> </ul> </div> </div> </div> </body> </html> <script> $(‘#ghyw .tabul li‘).hover(function(){ var index=$(this).index(); $(‘#ghyw .tabul li‘).eq(index).addClass("tabbt-on").siblings().removeClass("tabbt-on"); $(‘.tabpad ul-1 li‘).eq(index).addClass("tabbt-on").siblings().removeClass("tabbt-on"); $(‘#ghyw .tabpad‘).eq(index).addClass("show").siblings().removeClass("show"); }); </script>
以上是关于利用jquery实现网站中对应栏目下面内容切换效果。的主要内容，如果未能解决你的问题，请参考以下文章
HTML网页布局里，鼠标放上去时，页面如何实现导航栏下面内容的切换（HTML+CSS网页布局）