js div切换或者面板切换

最新推荐文章于 2024-06-19 13:36:07 发布

原创最新推荐文章于 2024-06-19 13:36:07 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js div切换或者面板切换

JQuery 同时被 2 个专栏收录

8 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的银行转账页面菜单切换效果。通过点击不同的菜单项，可以激活相应的样式并显示对应的面板内容。该效果包括菜单项的激活状态切换及隐藏显示功能。

$(document).ready(function () {

   $(".bankmenu div").click(function(){
   //样式初始化
   $(".bankmenu div").removeClass("active");//删除所有的
   $(this).addClass("active");//添加
   var index =$(".bankmenu div").index($(this)); //找到你想要添加的面板的样式
   $(".ghbanktran .ghbktable").hide();
   var panel= $(".ghbanktran .ghbktable");
   $(panel[index]).show();
  });

});

**********************jsp 内容***************************

<div class="ghbanktran">

         <div class="bankmenu clearfix">
            <div class="item active br">
                <a class="first">转账汇款 </a>
            </div>
            <div class="item br">
                <a>我的收款人</a>
            </div>
            <div class="item">
                <a class="last">交易明细</a>
            </div>
        </div>

<div class="ghbktable" style="display: none;">
            你好我是第一个div</div>
        
        <div class="ghbktable" style="display: none;">
             你好我是第二个div</div>

<div class="ghbktable" style="display: none;">
             你好我是第三个div</div>

</div>