登录、注册、个人信息、退出按钮的隐藏和出现

avatar 2016年08月09日20:53:12 2 5884 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
先上效果图

1.未登录之前，隐藏个人信息和退出
这里写图片描述

2.登陆后，隐藏登陆和注册按钮，显示用户头像
这里写图片描述

3.点击头像，显示下拉列表
这里写图片描述

先上jQuery代码
  1. //注册，登录，个人信息，退出按钮的隐藏和出现
  2.     $('#member, #logout').hide();
  3.     if ($.cookie('username')) {
  4.         $('#member,#logout').show();
  5.         $('#reg_a,#login_a').hide();
  6.     } else {
  7.         $('#member,#logout').hide();
  8.         $('#reg_a,#login_a').show();
  9.     }

html代码

1.两个按钮
  1. <div class="double">
  2.       <button class="btn btn-success" data-toggle="modal"
  3.           data-target="#myModal" data-backdrop="static" id="login_a">即刻登陆</button>
  4.       <button class="btn btn-danger" data-toggle="modal"
  5.           data-target="#myModal1" data-backdrop="static" id="reg_a">马上注册</button>
  6.   </div>

2.个人信息及退出
  1. <div class="user" style="width: 200px; height: 200px; float: right;padding-top: 40px;"
  2.                     id="member">
  3.                     <div class="dropdown">
  4.                         <img src="__PUBLIC__/Uploads/{$userInfo.filename}"
  5.                             alt="{$Think.session.username}" width="100px" height="100px"
  6.                             class="img-circle dropdown" data-toggle="dropdown"
  7.                             aria-haspopup="true" aria-expanded="true"
  8.                             style="-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; overflow: hidden;">
  9.                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  10.                             <li class="dropdown-header">
  11.                                 <!-- {$Think.session.username} -->{$userInfo.username}
  12.                             </li>
  13.                             <li><a href="#" data-toggle="modal" data-target="#myModal3"
  14.                                 data-backdrop="static">账号设置</a></li>
  15.                             <li><a href="#">Something else here</a></li>
  16.                             <li><a href="__URL__/doLogout" id="logout">退出</a></li>
  17.                         </ul>
  18.                     </div>
  19.                 </div>



本文地址：http://liuyanzhao.com/3498.html

转载请注明



历史上的今天
八月
09日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：1   待审核评论数：0
  1. avatar 丽丽
    回复 2019年04月22日 11:11:03

    好:cool: