jQuery垂直圆点导航插件

首先我们需要了解什么是垂直圆点导航，它是一种常见的网站导航方式，通常位于网站的侧边栏上，可以让用户快速地浏览整个网站的目录结构。

jQuery垂直圆点导航插件可以帮助我们快速实现这种导航方式，下面是使用这个插件的完整攻略：

步骤一：引入jQuery库和插件文件

首先需要在网页中引入jQuery库和jQuery垂直圆点导航插件文件。可以通过以下代码实现：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.vertical_dotnav.min.js"></script>

其中，jquery-3.5.1.min.js是jQuery库的文件名，需要保证在jquery.vertical_dotnav.min.js之前引入。

步骤二：创建HTML结构

在HTML中创建一个有序列表，其中每个列表项代表一个导航条目，并为每个列表项添加一个自定义的data-target属性，该属性的值为对应导航目标元素的选择器。

<ol class="dotnav">
  <li data-target="#section1">Section 1</li>
  <li data-target="#section2">Section 2</li>
  <li data-target="#section3">Section 3</li>
  <li data-target="#section4">Section 4</li>
  <li data-target="#section5">Section 5</li>
</ol>

步骤三：调用插件

在JavaScript中调用jQuery垂直圆点导航插件，将创建的有序列表作为参数传入。可以通过以下代码实现：

$(document).ready(function() {
  $('.dotnav').verticalDotNav();
});

现在就可以启动网页，测试垂直圆点导航条是否可以正常工作了。

示例一：动态设置导航条目和选中状态

下面是一个示例，展示如何通过JavaScript动态设置导航条目和选中状态。假设我们有一个按钮，点击按钮后可以添加两个新的导航条目。

HTML代码：

<button id="add-nav-item">Add Nav Item</button>

<ol class="dotnav">
  <li data-target="#section1">Section 1</li>
  <li data-target="#section2">Section 2</li>
  <li data-target="#section3">Section 3</li>
  <li data-target="#section4">Section 4</li>
  <li data-target="#section5">Section 5</li>
</ol>

JavaScript代码：

$(document).ready(function() {
  // 初始化垂直圆点导航条
  var dotnav = $('.dotnav').verticalDotNav();

  // 给按钮添加点击事件
  $('#add-nav-item').click(function() {
    // 动态添加两个新的导航条目
    $('.dotnav').append('<li data-target="#section6">Section 6</li><li data-target="#section7">Section 7</li>');

    // 更新垂直圆点导航条
    dotnav.update();

    // 选中第一个新添加的导航条目
    dotnav.select(5);
  });
});

在点击按钮后，即可看到两个新的导航条目被添加到了垂直圆点导航条上，并且第一个新添加的条目被选中。

示例二：自定义样式

下面是一个示例，展示如何通过CSS自定义垂直圆点导航条的样式。

CSS代码：

.dotnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dotnav li {
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px 0;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.dotnav li.active {
  background-color: #333;
}

将上述CSS代码添加到网页中，即可自定义垂直圆点导航条的样式。例如，通过添加border-radius: 50%样式可以将导航圆点变成圆形，通过background-color样式可以设置不同的颜色。

这些就是使用jQuery垂直圆点导航插件的完整攻略，希望对你有所帮助。