就是点击导航一个栏目,会显示对应的内容
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3acc01ba179d6f0ef098a65522931cea.png)
基本使用方法
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/076d6792a32f184645d38de8068e67e4.png)
**
让栏目有选中的效果?
**
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/64df4b0e7480398a73071fd77ac77c98.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e112a288287f02bdc232fc0a9c4db302.png)
data-spy=“scroll”
style=“position: relative”
**
当导航栏和内容框的距离达到多少时,导航栏选中效果会发生切换?
**
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6581b06c769d356163b6a36cfa0f03f7.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e42b1a7a885818c8a45a8167bbd51cde.png)
data-offset=“0”
**
如果一个页面有多个导航条,不能每一个都有效果,如何指定和哪一个导航条关联呢?
**
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/67974b77596757cd8e10c1dd59a83235.png)
这是给每一个导航条添加唯一的ID标识
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a47ab7ea3f75d767815ae67f6e5b0b39.png)
然后再内容框里添加 data-target="#nav" 属性,让内容与哪一个导航条发生关联