Javascript 登录按钮&；div（帐户）隐藏和显示
嗨，我的登录按钮有问题。我想让如果用户登录；帐户将显示，登录按钮将隐藏。其他登录按钮显示，帐户隐藏 我正在使用jquery编写代码，但不确定是否正确。此外，我觉得它根本不起作用。如果可以请给我一些建议，哪个地方需要正确。多谢各位 这些代码如下：Javascript 登录按钮&；div（帐户）隐藏和显示,javascript,html,jquery,css,Javascript,Html,Jquery,Css,嗨，我的登录按钮有问题。我想让如果用户登录；帐户将显示，登录按钮将隐藏。其他登录按钮显示，帐户隐藏 我正在使用jquery编写代码，但不确定是否正确。此外，我觉得它根本不起作用。如果可以请给我一些建议，哪个地方需要正确。多谢各位 这些代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<style>
.login{
float:right;
margin-right:50px;
margin-top:10px;
text-decoration:none;
background-color:darkcyan;
color:white;
padding:10px 25px;
border-radius:6px;
}
.login:hover{
background-color:white;
border: 2px solid darkcyan;
color:darkcyan;
overflow:hidden;
}
.account{
margin-left:70%;
margin-top:15px;
display:inline-block;
position:relative;
}
/* Popup container */
.notification{
position:absolute;
display: inline-block;
cursor: pointer;
}
/* The actual popup (appears on top) */
.notification .popuptext {
visibility: hidden;
width: 15px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 60px;
padding: 2px 4px;
position: absolute;
z-index: 1;
bottom: 96%;
left: 20%;
margin-left: 10px;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.notification .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.cart{
margin-left:50px;
position:absolute;
}
.user{
margin-left:108px;
position:absolute;
}
/* The container <div> - needed to position the dropdown content */
.user {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.user-dropdown {
display: none;
position: absolute;
background-color: #fff;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.user-dropdown a {
color: black;
padding: 12px 10px;
text-decoration: none;
display: block;
text-align: center;
}
/* Change color of dropdown links on hover */
.user-dropdown a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.user:hover .user-dropdown {display: block;}
</style>
</head>
<body>
<a href="" class="login" >Login</a>
<div class="account">
<div class="notification" onclick="myFunction()">
<i class='fas fa-bell' style='font-size:36px'></i>
<span class="popuptext" id="myPopup">1</span>
</div>
<div class="cart">
<i class='fas fa-shopping-cart' style='font-size:36px'></i>
</div>
<div class="user">
<i class='fas fa-user-circle' style='font-size:36px'></i>
<i class='fas fa-angle-down' style='font-size:24px'></i>
<div class="user-dropdown">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<script>
// if user login, account show; login button hide.
// else login button show; account hide.
$(document).ready(function(){
$(".login").click(function(){
$(".account").toggle();
});
});
</script>
</body>
</html>
文件
.登录{
浮动：对；
右边距：50px；
边缘顶部：10px；
文字装饰：无；
背景色：深黄色；
颜色：白色；
填充：10px 25px；
边界半径：6px；
}
.登录：悬停{
背景色：白色；
边框：2个实心黑色；
颜色：深色；
溢出：隐藏；
}
.帐户{
左缘：70%；
边缘顶部：15px；
显示：内联块；
位置：相对位置；
}
/*弹出式容器*/
.通知{
位置：绝对位置；
显示：内联块；
光标：指针；
}
/*实际弹出窗口（显示在顶部）*/
.notification.popuptext{
可见性：隐藏；
宽度：15px；
背景色：#555；
颜色：#fff；
文本对齐：居中；
边界半径：60px；
填充物：2px4px；
位置：绝对位置；
z指数：1；
底部：96%；
左：20%；
左边距：10px；
}
/*单击弹出窗口容器时切换此类（隐藏并显示弹出窗口）*/
.通知.展示{
能见度：可见；
-网络工具包动画：Fadein1s；
动画：Fadein1s
}
@-webkit关键帧fadeIn{
从{opacity:0；}
到{opacity:1；}
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
.购物车{
左边距：50像素；
位置：绝对位置；
}
.用户{
左边距：108px；
位置：绝对位置；
}
/*容器-需要定位下拉内容*/
.用户{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.用户下拉列表{
显示：无；
位置：绝对位置；
背景色：#fff；
最小宽度：100px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.用户下拉列表a{
颜色：黑色；
填充：12px 10px；
文字装饰：无；
显示：块；
文本对齐：居中；
}
/*更改悬停时下拉链接的颜色*/
.user下拉列表a:hover{背景色：#ddd；}
/*悬停时显示下拉菜单*/
.user:hover.user下拉列表{display:block；}
1.
//当用户单击时，打开弹出窗口
函数myFunction（）{
var popup=document.getElementById（“myPopup”）；
popup.classList.toggle（“显示”）；
}
//如果用户登录，帐户显示；登录按钮隐藏。
//其他登录按钮显示；帐户隐藏。
$（文档）.ready（函数（）{
$（“.login”）。单击（函数（）{
$（“.account”）.toggle（）；
});
});
登录的内容，它应该可以工作
编辑
您需要使用sessionStorage
或localStorage
或cookie
之类的工具来保存用户会话（以查看用户是否已登录）。我使用了会话存储
。最好是在您的案例中使用sessionStorage
会话用于保存特定会话的用户数据，如登录后的用户详细信息。关闭浏览器后，此数据将被删除。因此也有一定的安全性
在这里，您可以找到如何在浏览器中查找会话存储：
下面是登录的完整javascript代码。代码的其余部分应该是相同的。只需替换$（document.ready（function（）{}）
部分中的代码即可
// if user login, account show; login button hide.
// else login button show; account hide.
$(document).ready(function(){
//By default account div will be hidden
// And login will be shown
$(".account").hide();
// if login clicked
// and login successful
// store a session
$(".login").click(function(){
// Store a session key
// in this case, i have saved a random number
// you can store something unique
sessionStorage.setItem("session_key", Math.random());
// Then hide the login button
// And show account
$(".login").hide();
$(".account").show();
});
// Now check if session already exists
// If session exists, show account div
// and hide login div
if (sessionStorage.getItem('session_key') !== null){
$(".login").hide();
$(".account").show();
}
非常感谢。但如果用户登录，如何让登录按钮隐藏它？@CharlotteChee，现在检查。仅供参考：已经解决的问题应该被接受。这标志着你的问题已经解决了。否则，人们/系统会认为您的问题仍然存在。您可以通过勾选答案旁边箭头所在的复选标记来完成此操作。