利用jQuery对li标签操作

<ul class="con" id="products">
 　<li i="1" class="">
      <span class="jd-span1">Java</span>
   </li>

　<li i="2" class="">
      <span class="jd-span2">PHP</span>
   </li>

　<li i="3" class="">
      <span class="jd-span3">Mysql</span>
   </li>

</ul>

利用JQuery对li标签相关操作

 <script type="text/javascript">
  
   $(function(){
　　　　//获取class为js-span1的li添加active
       //$("jd-span1").addClass("active");
       //或取第一个li添加class
       $(".con li:first-child").addClass("active");
        //或取第一个li的i属性值
       var key = $(".con li:first-child").attr("i");
        //或取第一个li添加代码
       $(".con li:first-child").append('<input type="hidden" name="d_id" value="'+key+'">');
       $(".con li").click(function() {
             // 删除其他兄弟元素的样式
           $(this).siblings('li').removeClass('active');  
            // 删除其他兄弟元素添加的代码
           $(this).siblings('li').find('input').remove();
            // 添加当前元素的样式
           $(this).addClass('active');                            
          

           //或取有active的li的i属性值
           key = $(".active").attr("i");
            //获取有active的li添加代码
           $(".active").append('<input type="hidden" name="d_id" value="'+key+'">');

       });
   });
</script>