HTML, CSS et jQuery : créez une belle navigation par onglets-js tutoriel-php.cn

HTML, CSS et jQuery : créez une belle navigation par onglets

WBOY

Libérer： 2023-10-25 09:43:45

original

1104 Les gens l'ont consulté

HTML, CSS et jQuery : créez une belle navigation par onglets

La navigation est l'une des parties très importantes d'un site Web, elle peut aider les utilisateurs à trouver ce qu'ils veulent rapidement et avec précision. Dans cet article, nous présenterons comment créer une belle navigation par onglets en utilisant HTML, CSS et jQuery.

<li>Structure HTML

Tout d'abord, nous devons créer la structure HTML de la navigation. Nous utiliserons une liste non ordonnée (<ul></ul>) pour créer des éléments de navigation, chaque élément étant représenté à l'aide d'un élément de liste (<li>). Chaque élément de liste contient un lien (<a></a>) et définit un identifiant unique afin que nous puissions l'utiliser dans une étape ultérieure. <ul></ul>）来创建导航条目，每个条目使用列表项（<li>）表示。每个列表项中包含一个链接（<a></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>

Copier après la connexion

<li>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;
}

Copier après la connexion

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

<li>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');
  });
});

Copier après la connexion

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

L'exemple de code est le suivant :

<li>Styles CSS

Ensuite, nous devons ajouter quelques styles à la navigation pour la rendre agréable et cohérente avec le style du site Web. Nous pouvons utiliser CSS pour accomplir cette tâche.

L'exemple de code est le suivant :

Dans cet exemple, nous définissons le style de liste de l'élément de navigation sur aucun et supprimons le style de liste par défaut. Définissez ensuite l'espacement de chaque entrée et définissez certains styles de base pour les liens, tels que la couleur d'arrière-plan, le style de bordure, etc. Enfin, nous avons également ajouté un style spécial pour l'élément de navigation actuellement actif.

script jQuery

$(document).ready

active

href

active

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!