状态样式设置有点不太明白-慕课网

首页课程实战体系课手记专栏慕课教程

状态样式设置有点不太明白

来源：6-10 分页导航（翻页分页导航）

好久不见4014797

2016-11-16 20:19

如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签。这句话是什么意思呢？有点看不懂

写回答关注

2回答

JS嘛霸哥: 2017-02-22 21:12:28

嗯，我默认你已经知道了jquery的基本用法，咱们来实现一下点击disable类下的<a>标签不跳转href中链接的例子

首先，准备一个网页

  <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>基本导航条</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<style>
.navbar-fixed-top ~ .content{
  padding-top: 70px;
}
</style>
<body>
  <ul class="pager">
    <li><a href="http://www.imooc.com">&laquo;上一页</a></li>
    <li class="disabled"><a href="http://tv.sohu.com/">下一页&raquo;</a></li>
  </ul>
 </body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
<script type="text/javascript">
// TODO: 禁止disable类下的href链接的作用
</script>
</body>
</html>

好了，看一下，点上一页去慕课网，下一页是搜狐视频

但是，下一页应该是禁用状态，所以我们在//TODO的位置添加代码

  // 页面dom加完成时执行
  $(document).ready(function() {
    // jquery选择器 disbale类下的a标签注册一个点击事件
    $(".disabled > a").click(function() {
      //通过return false可以禁止触发href中的事件
      return false;
    })
  });

这样之后刷新网页，确保清除缓存之后再点击下一页，神马都不会发生啦~

祝你学习愉快

0 1