jQuery实现导航样式布局操作示例【可自定义样式布局】

先给出这个攻略的大致内容：

jQuery实现导航样式布局操作示例【可自定义样式布局】：

准备工作
添加HTML代码
添加CSS代码
添加jQuery代码
示例说明
示例演示
示例源码

下面将一步步详细讲解每个部分。

1. 准备工作

首先，我们需要引入jQuery库，可以从官网下载然后引入或者使用CDN方式引入。

2. 添加HTML代码

我们假设有4个导航，分别是首页、文档、博客和关于，可以用ul li标签来实现，具体代码如下所示：

<ul id="nav">
  <li><a href="#" class="active">首页</a></li>
  <li><a href="#">文档</a></li>
  <li><a href="#">博客</a></li>
  <li><a href="#">关于</a></li>
</ul>

3. 添加CSS代码

我们需要为导航添加样式，同时需要为选中的导航添加不同的样式，具体代码如下所示：

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

#nav li {
  margin: 0;
}

#nav a {
  display: block;
  padding: 10px;
  color: #333;
}

#nav a:hover {
  background-color: #eee;
}

#nav a.active {
  background-color: #333;
  color: #fff;
}

4. 添加jQuery代码

我们需要使用jQuery来实现导航样式布局操作，具体代码如下所示：

$(function() {
  $('#nav a').click(function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active');
  });
});

5. 示例说明

我们通过点击导航来切换不同的页面，当我们点击导航时，当前导航的样式变为选中样式，其他导航的样式恢复成原来的样式。

6. 示例演示

请点击链接查看演示效果：jQuery实现导航样式布局操作

7. 示例源码

下面是示例的完整源码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现导航样式布局操作</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #nav {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
    }

    #nav li {
      margin: 0;
    }

    #nav a {
      display: block;
      padding: 10px;
      color: #333;
    }

    #nav a:hover {
      background-color: #eee;
    }

    #nav a.active {
      background-color: #333;
      color: #fff;
    }
  </style>
  <script>
    $(function() {
      $('#nav a').click(function() {
        $('#nav a').removeClass('active');
        $(this).addClass('active');
      });
    });
  </script>
</head>
<body>
  <ul id="nav">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">文档</a></li>
    <li><a href="#">博客</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</body>
</html>

示例说明：

示例中，我们用了flex布局来实现水平排列导航，导航样式为灰色背景、黑色字体，选中的导航样式为黑色背景、白色字体。点击导航时，通过jQuery的addClass和removeClass方法来实现选中样式的切换。

示例说明2：

我们可以通过修改CSS来实现不同的导航样式布局，如将导航改成竖直排列：

#nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav li {
  margin: 0;
}

#nav a {
  display: block;
  padding: 10px;
  color: #333;
}

#nav a:hover {
  background-color: #eee;
}

#nav a.active {
  background-color: #333;
  color: #fff;
}

下面是更新后的HTML源码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现导航样式布局操作</title>
  <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #nav {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #nav li {
      margin: 0;
    }

    #nav a {
      display: block;
      padding: 10px;
      color: #333;
    }

    #nav a:hover {
      background-color: #eee;
    }

    #nav a.active {
      background-color: #333;
      color: #fff;
    }
  </style>
  <script>
    $(function() {
      $('#nav a').click(function() {
        $('#nav a').removeClass('active');
        $(this).addClass('active');
      });
    });
  </script>
</head>
<body>
  <ul id="nav">
    <li><a href="#" class="active">首页</a></li>
    <li><a href="#">文档</a></li>
    <li><a href="#">博客</a></li>
    <li><a href="#">关于</a></li>
  </ul>
</body>
</html>

在用CSS修改导航样式布局时，不需要修改jQuery代码，因为导航切换功能已经封装好了，只需要保证导航的HTML结构不变即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现导航样式布局操作示例【可自定义样式布局】 - Python技术站