给你一个简单的原生html5实现的例子吧。没有使用jquery。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li {
display: inline-block
width: 100%
height: 30px
line-height: 30px
}
li:active, li:focus, .li-active {
background: #dddddd
color: red
}
</style>
<script type="text/javascript">
onload = function () {
function removeActiveClass(node) {
node.className = ''
}
document.querySelector('ul[id=test]').onclick = function (e) {
Array.prototype.forEach.call(document.querySelectorAll('ul[id=test] > li'), removeActiveClass)
var target = e.target
target.className = 'li-active'
}
}
</script>
</head>
<body>
<ul id="test">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
</html>
工具/材料Sublime Text
01首先我们需要搭建一个html页面，如下图所示，在页面中导入需要的bootstrap文件
02然后我们在body标签中写下nav元素，如下图所示，注意给nav元素添加导航条样式
03接下来就给导航添加内容，如下图所示，运用的是ul元素，这里也运用了nav导航样式
04如果想要激活哪个导航，只需要像下图的方式，在li元素中添加active样式即可
05Bootstrap中的导航有下拉效果的设计，如果想用这种效果，需要用dropdown样式，如下图所示
06另外，值得一提的下拉导航条中可以加分割线，如下图所示，运用divider样式即可
07最后我们运行页面程序，你会看到如下图所示的效果，下拉导航以及激活状态都已经显示出来了
1、把要改变样式添加到相应js文件的全局变量中。
2、将变量绑定到view中。
3、在view中添加事件。
4、在相应js文件中添加该自定义方法changeColor， function，e，this.setData，color ， #fff。
1/微信小程序有个属性hover-class='active'，是指当点击列表元素时当按下鼠标左键会显示active样式，但鼠标离开样式就会复原，可以参考以下解决方案，直接上代码：
2/核心点:class=”taga-item {{dateCurrent==item.id?'active-tag':”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id.
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）