前端技术 js + html + css
实现方式一 代码
好久没有玩前端了，记录一下
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
<title>三只松鼠购物商城 - 用户中心</title>
<link rel="shortcut icon" href="/img/foodie.ico">
<link href="static/css/admin.css" rel="stylesheet" type="text/css">
<link href="static/css/amazeui.css" rel="stylesheet" type="text/css">
<link href="static/css/personal.css" rel="stylesheet" type="text/css">
<link href="static/css/systyle.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>
<style>
body {
-webkit-user-select: none; /* Chrome, Safari, Opera */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently not supported by any browser */
}
.me{
margin-left: 88px;
}
a:hover {
background-color: black;
}
a:visited {
color: rgb(18, 214, 175) !important;
font-size: 38px !important;
}
a:focus {
outline: none;
background-color: black;
color: white;
}
a.clicked {
background-color: black;
text-decoration: none;
}
</style>
</head>
<body>
<!--顶部导航条 -->
<div class="am-container header">
<ul class="message-l">
<div class="topMessage">
<div class="menu-hd">
<div class="logoBig">
<li><img src="static/images/threeMouse.jpg" style="height: 50px;"/></li>
</div>
</div>
</div>
</ul>
<ul class="message-r">
<div class="topMessage home">
<div class="menu-hd"><a href="index.html" target="_top" class="h">商城首页</a></div>
</div>
<div class="topMessage my-shangcheng">
<div class="menu-hd MyShangcheng"><a href="user-center.html" target="_top" ><i class=""></i>用户中心后台管理</a></div>
</div>
<div class="topMessage mini-cart">
<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i class="el-icon-shopping-cart-full"></i><span>购物车管理</span></a></div>
</div>
<div class="topMessage favorite">
<div class="menu-hd"><a href="#" target="_top"><i class="el-icon-star-off"></i><span>收藏夹</span></a></div>
</ul>
</div>
<div >
<b class="line"></b>
<div class="center">
<div class="col-main">
<div class="main-wrap">
<div >
<div>
<iframe name="mainFrame" width="100%" height="900" src="user-orderlist.html" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="footer">
<div class="footer-hd">
<p>
<a href="#">三只松鼠商城</a>
<b>|</b>
<a href="#">商城首页</a>
<b>|</b>
<a href="#">支付宝</a>
<b>|</b>
<a href="#">物流</a>
</p>
</div>
<div class="footer-bd">
<p>
<a href="#">关于三只松鼠</a>
<a href="#">合作伙伴</a>
<a href="#">联系我们</a>
<a href="#">网站地图</a>
<em>©threeMouse.com 版权所有</em>
</p>
</div>
</div>
</div>
<!-- menu -->
<aside class="menu">
<ul>
<li class="person active"><span style="font-weight: bold;"><a href="#">用户中心后台管理</a></span></li>
<li class="person">
<a href="index.html"> <i class="el-icon-menu"></i>首页</a>
<ul>
<li>
<a href="changePassword.html" target="mainFrame" onclick="changeColor(this)"><i class="el-icon-user"> </i>密码修改</a>
</li>
<!-- <li>
<a href="policy.html" target="mainFrame"><i class="el-icon-location"> </i>政策发布</a>
</li> -->
</ul>
</li>
<li class="person">
<ul>
<li>
<a href="user-orderlist.html" target="mainFrame" onclick="changeColor(this)">订单管理</a>
</li>
<li>
<a href="user-address.html" target="mainFrame" onclick="changeColor(this)"><i class="el-icon-location" > </i>收货地址</a>
</li>
<!-- <li>
<a href="user-comment.html" target="mainFrame" >进行评价</a>
</li>
<li>
<a href="http://localhost:8080/doc.html" target="_blank" >swagger后端接口测试地址</a>
</li> -->
<!-- <li>
<a href="admin-clothesinfo.html" target='_blank' >毕业商品修改</a>
</li>
<li>
<a href="admin-manageclothes.html" target="mainFrame">衣服商品商品添加</a>
</li>
<li>
<a href="clerk-orderlist.html" target="mainFrame">店员订单</a>
</li>
<li>
<a href="user-orderlist1.html" target="mainFrame">用户商品订单</a>
</li> -->
</ul>
</li>
</ul>
</aside>
</div>
</div>
<script src="static/js/base.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/cookie_utils.js"></script>
<script>
function changeColor(link) {
// 移除所有链接的 clicked 类
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("clicked");
}
// 给当前链接添加 clicked 类
link.classList.add("clicked");
}
</script>
<script>
var userId = getCookieValue("userId");
console.log(userId,"usercenterUserId")
new Vue({
el:'#app',
data:{
},
methods:{
}
})
</script>
</body>
</html>
实现方式二
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击链接更改文本颜色</title>
<style>
/* 设置默认链接颜色（蓝色） */
a {
color: blue;
}
/* 当链接被访问 / 激活时设置文字颜色为黑色 */
a:visited,
a:focus {
color: black;
}
</style>
</head>
<body>
<a href="#" onclick="changeColor(event)">第一个链接</a>
<a href="#" onclick="changeColor(event)">第二个链接</a>
<a href="#" onclick="changeColor(event)">第三个链接</a>
<p>这里是一段其他内容。</p>
<script>
function changeColor(event) {
// 阻止默认的链接跳转行为
event.preventDefault();
// 获取链接元素
var link = event.target;
// 将所有链接颜色设置为默认蓝色
var allLinks = document.getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++) {
allLinks[i].style.color = 'blue';
}
// 将当前链接的颜色设置为黑色
link.style.color = 'black';
}
</script>
</body>
</html>
144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
