导航和点击特效两种写法

一、常见的<ul><li></li></ul>

横向导航需要设置display:inline-block或者float:right;

点击特效：

(1)使用vue-router自带的linkActiveClass属性（但是只能设置字体的变化）：

const router = createRouter({
    history: createWebHistory(),
    routes,
    linkActiveClass:'navActive'
})
export default router;

active:{
   font-weight:bolder;
 }

(2)对于vue3

.active{
    border-bottom:1px solid black;
    color:blue;
  }
.test ul li {
    display:inline-block;
    margin-right:100px;
  }

<div class="test">
    <ul>
      <li v-for="(item,index) in options" :class="{'active':index===number}" :key="index" @click="change(index)">{{item}}</li>
    </ul>
  </div>

 setup() {
    const number = ref(0);
    return {
      number,
      options:["aa","bb","cc","dd"],
      change(index){
       this.number = index
      }
    }
  },

二、使用<dl><dt><dd>

.div1 form input{
          display: none;
        }
.div1 form label span{
          margin-right: 100px;
        }
.div1 form input:checked+span{
          color:blue;
          border-bottom: blue 1px solid;
        }

<div class="div1">
      <dl>
        <dt>
          <form>
            <label><input type="radio" name="aa" checked><span>111</span></label>
            <label><input type="radio" name="aa"><span>222</span></label>
            <label><input type="radio" name="aa"><span>333</span></label>
          </form>
        </dt>
        <dd>dsds</dd>
        <dd>dsds</dd>
      </dl>
</div>

不需要js代码，主要利用form表单<lable>标签和<input>标签的check属性，还有:check和+(相邻兄弟选择器)