知识库

选择数字对应的网页文字变红色的特效

来源: 本站    类别: 知识库    日期: 2016/6/1

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#status span{ font-style:normal}
#status .active{ color:red}
</style>
</head>
<body>
 <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
  function getStatus(status){
   var str = '1.登记 → 2.部门负责人 → 3.单位负责人 → 4.领导 → 5.交办 → 6.办理 → 7.办结';
   var $t = $('#status');
   var $arr = $(str.split('→'));
   $t.html('');
   $arr.each(function(index, element) {
    var $span = $('<span>'+ this +'</span>');
    index>0 ? $t.append(' → ') : '';
    index+1==status ? $span.addClass('active') : '';
    $t.append($span);
   });
  }
  $(function(){
   getStatus(1);
  });
 </script>
 <button type="button" onclick="getStatus(1)">1</button>
 <button type="button" onclick="getStatus(2)">2</button>
 <button type="button" onclick="getStatus(3)">3</button>
 <button type="button" onclick="getStatus(4)">4</button>
 <button type="button" onclick="getStatus(5)">5</button>
 <button type="button" onclick="getStatus(6)">6</button>
 <button type="button" onclick="getStatus(7)">7</button>
 <div id="status"></div>
</body>
</html>

相关文章


Copyright © 2004 - 2024 CNHWW Inc. All Rights Reserved
石家庄市征红网络科技有限公司版权所有 邮政编码:050051
服务电话:0311-85315152 13931185013 在线客服QQ:81447932 / 81447933 邮箱: cnhww@163.com