HTML、CSS和jQuery：构建一个漂亮的标签页导航-js教程-PHP中文网

HTML、CSS和jQuery：构建一个漂亮的标签页导航

WBOY

发布： 2023-10-25 09:43:45

原创

1553人浏览过

html、css和jquery：构建一个漂亮的标签页导航

HTML、CSS和jQuery：构建一个漂亮的标签页导航

导航是网站中非常重要的部分之一，它可以帮助用户快速准确地找到他们想要的内容。在这篇文章中，我们将介绍如何使用HTML、CSS和jQuery构建一个漂亮的标签页导航。

HTML 结构

首先，我们需要创建导航的HTML结构。我们将使用无序列表（<ul>）来创建导航条目，每个条目使用列表项（<li>）表示。每个列表项中包含一个链接（<a>），并设置一个唯一的ID，以便我们可以在后面的步骤中使用。

示例代码如下：

立即学习“前端免费学习笔记（深入）”；

<ul class="nav-tabs">
  <li><a href="#tab1" class="active">标签页1</a></li>
  <li><a href="#tab2">标签页2</a></li>
  <li><a href="#tab3">标签页3</a></li>
  <li><a href="#tab4">标签页4</a></li>
</ul>

登录后复制

CSS 样式

接下来，我们需要为导航添加一些样式，使其看起来漂亮并与网站的风格一致。我们可以使用CSS来完成这个任务。

示例代码如下：

立即学习“前端免费学习笔记（深入）”；

.nav-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-tabs li {
    margin-right: 10px;
}

.nav-tabs li a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px 5px 0 0;
}

.nav-tabs li a.active {
    background-color: #fff;
    border-bottom: none;
}

登录后复制

在这个示例中，我们将导航条目的列表样式设为 none，去掉默认的列表样式。然后设置每个条目的间距，并为链接设置一些基本的样式，如背景色、边框样式等。最后，我们还为当前激活的导航条目添加了特殊的样式。

AdminPanel后台管理面板

AdminPanel后台管理面板，这个后台管理模板的导航设计非常漂亮，头部还有未读的短消息和提醒的条数显示。有仪表盘、画廊、网页、小部件、存档、评论、插件、设置系统功能图标菜单。本套后台模板包含HTML/CSS模板页面和PSD源文件。

115

查看详情

jQuery 脚本

接下来，我们需要使用jQuery来添加一些交互效果，例如点击导航条目时切换内容显示。

示例代码如下：

立即学习“前端免费学习笔记（深入）”；

$(document).ready(function() {
  $('.nav-tabs a').click(function(e) {
    e.preventDefault();
    $('.nav-tabs a').removeClass('active');
    $(this).addClass('active');
    
    var tabId = $(this).attr('href');
    $('.tab-content div').removeClass('active');
    $(tabId).addClass('active');
  });
});

登录后复制

在这个示例中，我们首先使用 $(document).ready 来确保页面加载完成后执行脚本。然后，我们为每个导航链接添加了一个点击事件。当点击链接时，我们首先移除所有导航链接的 active 类，然后为当前点击的链接添加 active 类。接下来，我们使用链接的 href 属性获取对应的内容区域的ID，并移除所有内容区域的 active 类，然后为当前对应的内容区域添加 active 类。