siblings 链式写法，选项卡函数变得更优雅

JavaScript siblings 链式写法选项卡发布于 2020-11-18

在网页里有一个常见的布局：选项卡布局，它将相近的内容放在一起，通过选项卡控制内容的显示与隐藏。

选项卡布局大大提升了网页的空间的利用率，更少的空间，放更多的内容。

选项框HTML

HTML<ul>
    <li class="active" onclick="switchTab($(this)))">充话费</li>
    <li onclick="switchTab($(this)))">充流量</li>
    <li onclick="switchTab($(this)))">充固话</li>
</ul>

选项卡切换后，为了表示当前选项正在选中，选项卡又增加选中的状态，以示区分。

优化前的选项框函数

JS/**
 * 选项框
 * method switchTab
 * params {Object} _this 当前对象
 */
function switchTab(_this) {
    $('ul').find('li').removeClass('active');
    _this.addClass('active')
    //do something
}

很长的一段时间，我都是通过先找到父节点，移除所有选中状态，再为当前节点，添加已选中状态。该方法虽然能达到预期效果，不过总感觉有点别扭，冥冥之中感觉应该用一行代码即可。

siblings() 方法返回被选元素的所有同级元素。

优化后的选项框函数

JS/**
 * 选项框
 * method switchTab
 * params {Object} _this 当前对象
 */
function switchTab(_this) {
   _this.addClass('active').siblings().removeClass('active');
    //do something
}

偶遇 siblings 方法还得一次加班说起，因某种原因，需要对别人的网站进行分析，结果发现了 siblings 方法将2行代码，用链式方式，压缩到一行代码。

至此，优化了以前的代码，代码变得更加精洁；同时明悟：写代码不能只一味闭门造车，偶尔走出去，会有意想不到的收获！