html js实现横向菜单,JavaScript实现横版菜单栏

本文实例为大家分享了JavaScript实现横版菜单栏的具体代码，供大家参考，具体内容如下

示例代码：

横版菜单栏

.active{

background-color: aqua;

}

.hide{

display: none;

}

.menu{

background-color: #667dbd;

width: 300px;

height: 30px;

}

.menu-item{

border: #bd342d solid 2px;

cursor: pointer;

/*鼠标悬停在相应标签上时变成手指的样子*/

}

.con-item{

min-height: 200px;

border: solid 1px;

width: 300px;

}

菜单一

菜单二

菜单三

内容一

内容二

内容三

$('.menu-item').click(function () {

$(this).addClass('active').siblings().removeClass('active');

var match = $(this).attr('m');

$('.content').children('[c='+match+']').removeClass('hide').siblings().addClass('hide');

// children函数的参数要求是字符串！

// $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

// 也可以用索引的方式(.eq($(this).index()))找到对应的标签，这种处理方式就不需要要用到自设属性m和c了

});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。