CSS网页布局入门教程10：带当前标识的标签式横向导航

下面我将为你详细讲解“CSS网页布局入门教程10：带当前标识的标签式横向导航”的完整攻略。

1. 什么是带当前标识的标签式横向导航？

带当前标识的标签式横向导航是一种常见的网页布局方式，它通常用于网站顶部的导航栏中。这种导航栏将多个链接以标签页的形式展现出来，用户可以通过点击标签页来跳转到对应页面。而带当前标识则是指，当前所处于的标签页将被特别标识出来，以帮助用户明确当前所处的页面。

2. 实现带当前标识的标签式横向导航的步骤

2.1 HTML结构

首先，我们需要定义导航栏的HTML结构。这里我们假设有三个页面，分别是“首页”、“产品列表”、“联系我们”，对应的URL地址分别为“/”，“/products”和“/contact”。

<ul class="nav">
  <li><a href="/">首页</a></li>
  <li><a href="/products">产品列表</a></li>
  <li><a href="/contact">联系我们</a></li>
</ul>

2.2 CSS样式

接下来，我们需要定义导航栏的CSS样式。这里我们采用水平排列的方式，并且给当前所处标签页添加一个特别的样式。

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #eee;
  display: flex;
}

.nav li {
  flex-grow: 1;
  text-align: center;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.nav li.active a {
  background-color: #ddd;
}

2.3 JavaScript脚本

最后，我们需要定义一个JavaScript脚本来动态地为当前所处标签页添加样式。具体实现方式是，获取当前页面的URL地址，然后遍历导航栏中的所有链接，如果有链接的URL地址与当前页面的URL地址相同，则给该链接的li元素添加一个名为“active”的类。

// 获取当前页面的URL地址
var currentUrl = window.location.pathname;

// 遍历导航栏中的所有链接
var navLinks = document.querySelectorAll('.nav li a');
navLinks.forEach(function(link) {
  // 如果链接的URL地址与当前页面的URL地址相同
  if (link.getAttribute('href') === currentUrl) {
    // 给该链接的li元素添加一个名为“active”的类
    link.parentNode.classList.add('active');
  }
});

3. 示例说明

下面，我将针对两个示例具体说明如何实现带当前标识的标签式横向导航。

3.1 示例1：使用jQuery实现导航栏高亮

<ul class="nav">
  <li><a href="/">首页</a></li>
  <li><a href="/products">产品列表</a></li>
  <li><a href="/contact">联系我们</a></li>
</ul>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  // 获取当前页面的URL地址
  var currentUrl = window.location.pathname;

  // 遍历导航栏中的所有链接
  $('.nav li a').each(function() {
    // 如果链接的URL地址与当前页面的URL地址相同
    if ($(this).attr('href') === currentUrl) {
      // 给该链接的li元素添加一个名为“active”的类
      $(this).parent().addClass('active');
    }
  });
});
</script>

<style>
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #eee;
  display: flex;
}

.nav li {
  flex-grow: 1;
  text-align: center;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.nav li.active a {
  background-color: #ddd;
}
</style>

该示例使用了jQuery框架来实现导航栏的高亮。具体实现方式是，使用jQuery的选择器获取所有的导航链接，然后遍历链接，如果当前链接的URL地址与当前页面的URL地址相同，则为该链接所在的li元素添加一个名为“active”的类。

3.2 示例2：使用Vue.js实现导航栏高亮

<div id="app">
  <ul class="nav">
    <li v-for="page in pages" :key="page.url" :class="{ active: page.url === currentUrl }">
      <router-link :to="page.url">{{ page.title }}</router-link>
    </li>
  </ul>
</div>

<script src="https://unpkg.com/vue@3.2.7/dist/vue.global.min.js"></script>
<script src="https://unpkg.com/vue-router@4.0.11/dist/vue-router.min.js"></script>
<script>
const Home = { template: '<div>Home</div>' };
const Products = { template: '<div>Products</div>' };
const Contact = { template: '<div>Contact</div>' };

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: Products },
  { path: '/contact', component: Contact }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
});

const app = Vue.createApp({
  data() {
    return {
      pages: [
        { title: '首页', url: '/' },
        { title: '产品列表', url: '/products' },
        { title: '联系我们', url: '/contact' }
      ]
    };
  },
  computed: {
    currentUrl() {
      return window.location.pathname;
    }
  }
});

app.use(router);
app.mount('#app');
</script>

<style>
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #eee;
  display: flex;
}

.nav li {
  flex-grow: 1;
  text-align: center;
}

.nav li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
}

.nav li.active a {
  background-color: #ddd;
}
</style>

该示例使用了Vue.js框架和Vue Router插件来实现导航栏的高亮。具体实现方式是，通过Vue.js的计算属性获取当前页面的URL地址，然后使用Vue Router的router-link组件生成导航链接。在循环渲染导航链接的过程中，使用Vue.js的条件渲染的语法为当前所处页面所对应的li元素添加一个名为“active”的类。

至此，我们已经完成了带当前标识的标签式横向导航的实现攻略。希望能对你有所帮助。