极客观点
项目管理
HarmonyOS
如题，点击菜单，当前项带下划红线
问题：点击关于并没有下划线
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<style>
a {
text-decoration: none;
}
.current {
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id="wrap">
<header-menu :index_cur.sync="index_cur"
about_cur.sync="about_cur"></header-menu>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 顶部菜单
Vue.component('header-menu', {
props: ['index_cur', 'about_cur'],
template: `
<header class="content clearfix">
<div class="right">
<div class="nav-top">
</div>
<div class="nav-bt">
<ul class="clearfix">
<li :class="{current:index_cur}"><a href="./index.html">首页</a></li>
<li :class="{current:about_cur}"><a href = "./template.html">关于</a></li>
</ul>
</div>
</div>
</header>
`,
});
let vm = new Vue({
el: '#wrap',
data: {
index_cur: true,
about_cur: false
},
methods: {
// 菜单点击
current() {
window.location.href.includes('index') ? this.index_cur = true : this.index_cur = false;
window.location.href.includes('template') ? this.about_cur = true : this.about_cur = false;
},
},
mounted() {
// 进行DOM操作
this.current();
},
})
</script>
</body>
</html>template.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
<style>
a {
text-decoration: none;
}
.current {
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div id="wrap">
<header-menu :index_cur.sync="index_cur"
about_cur.sync="about_cur"></header-menu>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
// 顶部菜单
Vue.component('header-menu', {
props: ['index_cur', 'about_cur'],
template: `
<header class="content clearfix">
<div class="right">
<div class="nav-top">
</div>
<div class="nav-bt">
<ul class="clearfix">
<li :class="{current:index_cur}"><a href="./index.html">首页</a></li>
<li :class="{current:about_cur}"><a href = "./template.html">关于</a></li>
</ul>
</div>
</div>
</header>
`,
});
let vm = new Vue({
el: '#wrap',
data: {
index_cur: true,
about_cur: false
},
methods: {
// 菜单点击
current() {
window.location.href.includes('index') ? this.index_cur = true : this.index_cur = false;
window.location.href.includes('template') ? this.about_cur = true : this.about_cur = false;
},
},
mounted() {
// 进行DOM操作
this.current();
},
})
</script>
</body>
</html>
html5