html
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>可切换Tab选项卡|菜单栏</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<!--引入jquery文件(必须呀)-->
</head>
<body>
<div class="tbb">
<p class="left" onclick="gdt(this,1)"><</p>
<ul class="list">
<!--选项卡列表 <li>.....</li> class="cur" 选中的-->
</ul>
<p class="right" onclick="gdt(this,2)">></p>
</div>
<div class="tabs">
<!--选项卡内容 <div>....</div> class="show" 显示的-->
</div>
</body>
</html>css
*{
padding：0px;
margin: 0px;
list-style: none;
}
body{
padding: 10px;
}
.tbb{
width: 100%;
height: 40px;
overflow: hidden;
background: #494949;
/*不能选中内的文字*/
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/*不能选中内的文字*/
}
.tbb .list{
width: 99999999px;
height: 40px;
white-space: nowrap;
overflow-y: hidden;
position: relative;
float: left;
left: 0px;
top: -40px;
padding-left: 20px;
}
.tbb .list li{
min-width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
color: white;
float: left;
padding: 0 10px;
background: rgba( 32, 35, 64);
cursor: pointer;
transition: all 0.3s;
}
.tbb .list li:hover{
background: rgba( 32, 35, 64);
box-shadow: 0 0 10px white inset;
}
.tbb .list .cur{
background:#494949;
box-shadow: 0px 10px 0px 0px #ff0000 inset, /*上边阴影 红色*/
10px 0px 0px 0px #3bee17 inset, /*左边阴影 绿色*/
-10px 0px 0px 0px #2279ee inset, /*右边阴影 蓝色*/
0px 0px 0px 0px #eede15 inset; /*下边阴影 黄色*/
}
.tbb .list .cur:hover{
background:#494949;
box-shadow: 0px 10px 0px 0px #ff0000 inset, /*上边阴影 红色*/
10px 0px 0px 0px #3bee17 inset, /*左边阴影 绿色*/
-10px 0px 0px 0px #2279ee inset, /*右边阴影 蓝色*/
0px -10px 0px 0px #eede15 inset; /*下边阴影 黄色*/
}
.tbb .left,.tbb .right{
cursor: pointer;
height: 40px;
line-height: 40px;
width: 20px;
font-size: 20px;
overflow: hidden;
z-index: 9999;
background: #282923;
box-shadow: 0 0 20px white;
text-align: center;
font-weight: bold;
color: #fff;
float: left;
}
.tbb .left{
position: relative;
left: 0px;
top: 0px;
}
.tbb .right{
position: relative;
float: right;
right: 0px;
top: -80px;
}
.tabs{
width: 100%;
background: #494949;
box-sizing: border-box;
padding: 10px;
color: white;
}
.tabs div{
width: 100%;
display: none;
}
.tabs .show{
display: block;
}js
$(document).ready(function(){
for(var i = 1; i < 40; i++){ //初始化Tab数据
if(i == 1){ //默认选中
//可以变成图片 要调高
$(".tbb .list").append('<li class="cur">' +i+ '</li>');
$(".tabs").append("<div class='show'>" +i+ "</div>");
}else{
$(".tbb .list").append('<li>' +i+ '</li>');
$(".tabs").append("<div>" +i+ "</div>");
}
}
$(".tbb").contents(".list").contents("li").each(function(i,item){
$(item).attr("onclick","liyd(this,3)"); //绑定事件
});
});
function gdt(n , m){ //点击箭头左右
var li = $(n).siblings(".list").contents(".cur")[0]; //当前li
var li_index = $(li).index(); //当前li的下标
var li_length = $(n).siblings(".list").contents("li").length; //li 总个数
if(m == 1){ //上一个
if(li_index != 0){ //不是第一个
var now_li = $(li).prev();
}else{ //不能往前了
return;
}
}else{ //下一个
if(li_index < li_length - 1){ //不是最后一个
var now_li = $(li).next();
}else{ //不能向后了
return;
}
}
liyd(now_li[0], m);
}
function liyd(now_li , m = 1){ //实现移动可选中
now_li = $(now_li); //当前的li
var beffor_li = now_li.siblings(".cur"); //之前选中的li
beffor_li.attr({"class": "", "onClick": "liyd(this,3)"}); //取消选中之前的li
now_li.attr({"class": "cur", "onClick": ""}); //选中当前的li
var now_li_width = now_li.outerWidth(true); //当前li宽
var now_li_left = now_li.position().left; //当前li离左边(ul)的距离
var now_left = parseInt(now_li.parent(".list").css('left').replace("-","").replace("px",""));
//获取离左边的距离
var now_li_index = now_li.index(); //当前li的下标
var gj = $(".tbb .left").width() * 2; //左右箭头的总宽
var all_width = $(".tbb").width() - gj; //tbb可视(除去左右箭头)的宽
if(now_li_left + now_li_width < all_width){ //如果小于 tbb可视宽就回到 0
var left = 0; //离左边的居留
}else{ //大于
var left = ""; //离左边的居留为空不动
if(m == 1){ //往前
if( now_left > now_li_left){ //判断上一个是否被遮住 是则 移动将它显示出来
left = "-"+ (now_li_left - gj); 离左边的居留
}
}else if(m == 2){ //往后
if(now_li_left - now_li_width <= all_width + now_left){ //判断下一个是否被遮住 是则 移动将它显示出来
left = "-"+ (now_li_left - all_width + now_li_width); //离左边的居留
}
}else{
var beffor_li_width = beffor_li.width(); //获取之前被选中li的宽
var beffor_li_left = beffor_li.position().left; //获取之前被选中li离左边(li)的距离
if(now_left > now_li_left){ //往前 判断上一个是否被遮住 是则 移动将它显示出来
left = "-"+ (now_li_left - gj);
}else if(now_li_left + now_li_width > beffor_li_width + beffor_li_left && now_li_left + now_li_width > all_width + now_left){ //往后
//判断下一个是否被遮住 并且不完全在tbb可视内 是则 移动将它显示出来
left = "-"+ (now_li_left - all_width + now_li_width);
}
//没有就不动
}
}
//显示底下的 Tabs 隐藏之前的 显示当前的
now_li.parent(".list").parent('.tbb').siblings(".tabs").children().removeClass("show").eq(now_li_index).addClass("show");
if(left !== ""){ //如果 left 被赋值就改变离左边的距离
now_li.parent(".list").animate({left:left + "px"}, 100); //当前滚动条离左边的距离
}
}
1744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
