<template>
<div class="heard1">
<div class="heard">
<div class="heard-item-l">
<img src="../../../static/image/logo.png" alt="" srcset="">
<div>
<div style="font-weight: 700; letter-spacing: 7.5px;">广州稚宇技术有限公司</div>
<div style="font-size: 9px;">Guangzhou Zhiyu Technology Co. , Ltd.</div>
</div>
</div>
<router-link class="heard-item-ss" to="/">首页</router-link>
<router-link class="heard-item-s" to="/About">产品研发</router-link>
<router-link class="heard-item-s" to="/commerce">解决方案</router-link>
<router-link class="heard-item-s" to="/case/case">合作案例</router-link>
<router-link class="heard-item-s" to="/Aboutus">关于我们</router-link>
<!-- <router-link :class="{'heard-item-ss': 0 == isActive}" class="heard-item-s" @click="change(0)" to="/">首页</router-link> -->
<!-- <router-link :class="{'heard-item-ss': 1 == isActive}" class="heard-item-s" @click="change(1)" to="/About">产品研发</router-link> -->
<!-- <router-link :class="{'heard-item-ss': 2 == isActive}" class="heard-item-s" @click="change(2)" to="/commerce">解决方案</router-link> -->
<!-- <router-link :class="{'heard-item-ss': 3 == isActive}" class="heard-item-s" @click="change(3)" to="/case/case">合作案例</router-link> -->
<!-- <router-link :class="{'heard-item-ss': 4 == isActive}" class="heard-item-s" @click="change(4)" to="/Aboutus">关于我们</router-link> -->
<!-- 搜索框 -->
<div class="heard-item-r">
<div>
<input type="text" placeholder="请输入内容">
<i class="a"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isActive: 0,
list: [
{name:"首页"},
{name:"产品研发"},
{name:"3"},
{name:"4"},
{name:"5"},
]
}
},
methods: {
change (e) {
// var a = document.getElementsByClassName('.heard-item-s');
var isActive = 0;
// for (var i=0;i < a.length; a++) {
this.isActive = e;
// console.log(item)
// }
}
}
// components: 'heard',
}
var e = document.getElementsByTagName("router-link");
var i,j;
var length = e.length;
for (i=0;i<length;i++){
e[i].onclick=function() {
alert(111)
for(j=0;j<length;j++) {
e[j].className="heard-item-s";
}
this.className+= "heard-item-ss";
}
}
</script>
<style lang="scss" scoped>
.heard1 {
width: 100%;
height: 80px;
background-image: url("../../../static/image/rectangle.png");
position: absolute;
z-index: 500;
.heard {
width: 78%;
height: 80px;
display: flex;
font-size: 14px;
margin-left: 12%;
.heard-item-l {
min-width: 300px;
width: 426px;
height: 45px;
display: flex;
flex-direction: row;
color: #224FA8;
padding-top: 24px;
font-family: PingFangSC-Semibold, PingFang SC;
img {
width: 33px;
height: 33px;
}
}
.heard-item-s {
min-width: 100px;
width: 7.81%;
height: 68.75%;
margin-top: 25px;
line-height: 28px;
font-weight: 500;
color: #333;
text-decoration: none;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
}
.heard-item-ss {
background: #224FA8;
min-width: 100px;
width: 7.81%;
height: 68.75%;
margin-top: 25px;
line-height: 28px;
font-weight: 500;
color: #FFF;
text-decoration: none;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
}
.heard-item-r {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
div {
position: relative;
input {
width: 139px;
height: 26px;
// margin: 24px 0 0 130px;
border-radius: 18px;
border: 2px solid rgba(94, 93, 93, 0.39);
outline:none;
text-indent: 10px;
border-radius: 18px;
background-color: transparent;
}
.a {
background: url(../../../static/icon/search.png);
background-repeat: no-repeat;
background-size: contain;
width: 12px;
height: 12px;
position: absolute;
top: 10px;
right: 10px;
}
}
}
}
}
</style>
导航栏点击高亮,为什么我用了几种办法都不能成功切换背景??
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- 本堃不方 2021-11-11 22:33关注
都vue,原生都不怎么合适了
vue自带的导航高亮,在css里面写.router-link-active{ background: red; }
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 Centos7 / PETGEM
- ¥15 csmar数据进行spss描述性统计分析
- ¥15 各位请问平行检验趋势图这样要怎么调整?说标准差差异太大了
- ¥15 delphi webbrowser组件网页下拉菜单自动选择问题
- ¥15 wpf界面一直接收PLC给过来的信号,导致UI界面操作起来会卡顿
- ¥15 init i2c:2 freq:100000[MAIXPY]: find ov2640[MAIXPY]: find ov sensor是main文件哪里有问题吗
- ¥15 运动想象脑电信号数据集.vhdr
- ¥15 三因素重复测量数据R语句编写,不存在交互作用
- ¥15 微信会员卡等级和折扣规则
- ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗