菜鸟笔记——一个特别简单的选项卡

这十天还在搭项目的框架，前两天完成了一个特简单的选项卡，这是尚未改变的样式。

点击上面的选项后，样式发生改变：

只有一部分的HTML代码和全部的jQuery代码，具体代码如下：

//一部分HTML代码
<ul class="ml10">
    <li class="tabN tabS" id="liFreeInit" onclick="selectLi(this)">
        <span class="step mr5">1</span>初始资料
    </li>
    <li class="tabN" id="liJinHuo" onclick="selectLi(this)">
        <span id="step2" class="step mr5">2</span>进货
</li>
</ul>
<div id="divFreeInit" class="whiteBox">
    <table width="900" border="0" cellspacing="18" cellpadding="0" align="center" class="font14 fontDeepBlue">
        </tbody>
</table>
</div>
<div id="divJinHuo" class="whiteBox">
    <table width="900" border="0" cellspacing="18" cellpadding="0" align="center" class="font14 fontDeepBlue">
        </tbody>
</table>
</div>

JavaScript代码

//js代码
function selectLi(obj) {
    //改变选项
    $(".whiteBoxTab li").removeClass("tabS");//给带有whiteBoxTab的这个类的标签下所有li标签去掉tabS这个类
    $(obj).addClass("tabS");//给目标加上tabS这个类
    //改变卡片
    var liId = $(obj).prop("id");//获取ID
var NewID = liId.substring(2); //去除ID前缀
//var NewID = liId.replace("li", "")//这个也可以
    $(".whiteBox").hide();//隐藏带有whiteBox类样式
    $("#div" + NewID).show();//显示要显示的样式
}

这个方法呢，是我看别人的代码后自己想的(也可以说是总结)，正不正规我不知道，反正能用，逻辑没问题，也没见哪报错，这个方法的思路是将选项和对应卡(这个说法也不知道对不对，算了意思到了就行)的ID命名成类似的样子，只是前缀不一样而已，比如liFreeInit和divFreeInit，点击选项时利用js代码中获取到选项的ID，去除前缀得到一个半成品ID，给这个半成品ID另外加一个前缀，其他的说明代码里有。