選項(xiàng)卡切換基于jq,所以請先引入jq。不需要很高深的代碼,只需要簡單了解下jq就可以做出選項(xiàng)卡切換。
不廢話直接貼一段代碼。具體可以參考下我在csdn上的博客。
$(".leftHead ul li").click(function () { let $index = $(this).index() $(this).addClass("on").siblings().removeClass("on") $(".leftList").eq($index).show().siblings().hide() })
大體解釋一下,當(dāng)選擇.leftHead ul li的時(shí)候會(huì)記錄下它的index的值,并且賦予它新的css,取消掉同級(jí)的同名css。
然后第二步,從列表中選擇與.leftHead ul li的index值相等的一欄,展示,隱藏同級(jí)的其他的模塊。
別忘了引入,jquery.min.js,否則切換是不會(huì)生效的。
關(guān)鍵詞: