vue.js 当点击，我想改变颜色的文字在导航栏顺风CSS

hts6caw3 于 2023-06-24 发布在 Vue.js

关注(0)|答案(1)|浏览(149)

单击按钮然后更改颜色，然后单击另一个也更改颜色，但第一个按钮返回默认颜色enter image description here

<ul
          class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-white dark:border-gray-700"
        >
          <li>
            <a
              href="#user"
              class="block py-2 pl-3 pr-4 text-gray-700 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 dark:text-gray-400 md:dark:hover:bg-transparent dark:border-gray-700 focus:outline-none focus:text-cyan-400"
              @click="scrollToDiv('#user')"
              >User</a
            >
          </li>
          <li>
            <a
              href="#enterprise"
              class="block py-2 pl-3 pr-4 text-gray-700 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 dark:text-gray-400 md:dark:hover:bg-transparent dark:border-gray-700"
              @click="scrollToDiv('#enterprise')"
              >Enterprise</a
            >
          </li>
          <li>
            <a
              href="#customer"
              class="block py-2 pl-3 pr-4 text-gray-700 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 dark:text-gray-400 md:dark:hover:bg-transparent dark:border-gray-700"
              @click="scrollToDiv('#customer')"
              >Customer</a
            >
          </li>
        </ul>

vue.js

来源：https://stackoverflow.com/questions/76488797/when-click-i-want-to-change-color-of-text-in-navbar-with-tailwind-css

1条答案

按热度按时间

q3qa4bjr1#

您可以尝试以下方法：

将标题存储在一个变量中，并使用v-for渲染它们。
使用变量存储当前选定的标题。

CodeSandbox

<template>
  <div id="app">
    <ul
      class="flex flex-col p-4 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-white dark:border-gray-700"
    >
      <li v-for="(item, index) in navList" :key="index">
        <a
          class="block py-2 pl-3 pr-4 text-gray-700 rounded md:hover:bg-transparent md:hover:text-cyan-400 md:p-0 dark:text-gray-400 md:dark:hover:bg-transparent dark:border-gray-700 focus:outline-none focus:text-cyan-400"
          :href="`#${item.title}`"
          :class="{
            'text-pink-500': currentSelected === index,
          }"
          @click="() => clickEvent(index)"
        >
          {{ item.title }}
        </a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from "vue";

const navList = [
  {
    title: "User",
  },
  {
    title: "Enterprise",
  },
  {
    title: "Customer",
  },
];

const currentSelected = ref(0);

const clickEvent = (index) => {
  currentSelected.value = index;
};
</script>

赞(0）回复(0）举报 2023-06-24

我来回答

vue.js 当点击，我想改变颜色的文字在导航栏顺风CSS

1条答案

相关问题

热门标签

最新问答