android转H5

一直做得是android开发，最近由于工作需要，要做H5开发。

写这个也是对前一段时间H5开发的一个总结，开发用的是SUI框架，但是写的时候发现使用框架的时候对样式不知道该怎么改，只好自己写页面，写布局，写样式。

首先遇到的问题是selecter，这个控件，在不同的浏览器中显示不同的样式，不仅仅是下拉框，还有可能是弹出框，不符合要求，所以用div模拟下拉框，如下：

<div class="model-select-box" id="box1">
 <div class="model-select-text" id="txt1">类别</div>
 <ul class="model-select-option" id="option1">
   <li class="seleced tt " id="moren1" onclick="selected1(this)">类别</li>
   <li id="td-card-type"></li>
 </ul>

</div>

li中第一个是固定的，下面是从接口获取到的数据，进行展示。

<li id="type-sel" class="tt" onclick="selected1(this)">{{$value.TEXT}}</li>

点击事件为

function selected1(a){
        //讲选中项的值放到“sel“里显示
        var txt = a.innerText;
        document.getElementById("txt1").innerText = txt;  
        var tt=document.getElementsByClassName("tt");
        for(var i=0;i<tt.length;i++){
        if(tt[i].innerText==a.innerText){
        a.style.color="red";
        }else{
        tt[i].style.color="black";
        }
        }

    } 

点击时字体颜色进行变化。

用js写成，基本所有浏览器都可用。

比较简单，毕竟刚开始做