<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
* { margin:0px; padding:0px;}
.MenuTab { margin:0 auto; width:1000px; overflow:hidden; height:24px;}
.MenuTab .LeftTabBtn,.MenuTab .RightTabBtn { float:left; width:45px; height:24px; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTab .MenuTabBtn { float:left; width:900px; overflow:hidden; height:24px; position:relative;}
.MenuTabBtn ul { list-style:none; width:10000px; position:absolute; height:24px; overflow:hidden; left:0px; top:0px;}
.MenuTabBtn ul li { float:left; width:178px; height:22px; border:1px solid #dedede; text-align:center; font:14px/24px "宋体"; cursor:pointer;}
.MenuTabCont { margin:0 auto; width:1000px; overflow:hidden; height:300px;}
.MenuTabCont .MenuTabContent { background:#0FF; color:#000; width:1000px; overflow:hidden; height:300px; display:none;}
</style>
<script type="text/javascript" src="http://www.shopbest.cn/js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
$DtDiv = $(".MenuTabBtn > ul > li");
$DtDiv.click(function(){
DdDiv = $DtDiv.index(this);
$(".MenuTabContent").eq(DdDiv).show().siblings().hide();
})
$(".LeftTabBtn").click(function(){
if(i>0){i--;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("左边没了菜单");}})
$(".RightTabBtn").click(function(){
if(i<2){i++;LeftWid = i*180;$(".MenuTabBtn > ul").css("left",-LeftWid);}
else{alert("右边没了菜单");}})
})
</script>
</head>
<body>
<div class="MenuTab">
<div class="LeftTabBtn">←</div>
<div class="MenuTabBtn">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
<div class="RightTabBtn">→</div>
</div>
<div class="MenuTabCont">
<div class="MenuTabContent" style="display:block;">1</div>
<div class="MenuTabContent">2</div>
<div class="MenuTabContent">3</div>
<div class="MenuTabContent">4</div>
<div class="MenuTabContent">5</div>
<div class="MenuTabContent">6</div>
<div class="MenuTabContent">7</div>
</div>
</body>
</html>
分享到:
相关推荐
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
滑动门效果 采用js和css结合的方式!
kutm滑动门源码kutm滑动门源码kutm滑动门源码
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门
HTML调用JS实现多项滑动门选项卡特效 国开电大Dreamweaver网页设计形考任务八答案, 更新版国家开放大学/电大专科《Dreamweaver网页设计》形考任务八。
本人写的一个js插件 主要内容:点击门、滑动门 javascript,jquery都可以使用 可能有的地方写的不太好。。请大家谅解内含demo
Js 滑动门 英文字母切换 仿淘宝购物索引效果Js 滑动门 英文字母切换 仿淘宝购物索引效果
css滑动门技术 css滑动门技术 css滑动门技术 css滑动门技术 css滑动门技术 css滑动门技术 css滑动门技术
滑动门案例
这是一款简单的纯js滑动按钮插件。通过该js插件,可以将checkbox元素变为好看的iOS或Material Design样式的滑动按钮。
滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单 滑动门技术菜单
一个用处很广常用的tabs滑动门技术实例
Tab滑动门与导航菜单JS+CSS代码,简单易用.
有很多css+js写的东东。如日期控件、滑动门、弹出框、提示层等等。里面大部分都有
形考任务八 HTML 调用js实现多项滑动门选项卡特效。
Js滑动门 英文字母切换 仿淘宝购物索引效果 Js滑动门,英文字母切换,仿淘宝购物索引效果,实际上是一个特别的修改菜单,淘宝购物有一个分类导航和这个效果是类似的,效果不错,希望大家喜欢。
原生js鼠标悬停图标菜单滑动门显示效果 原生js鼠标悬停图标菜单滑动门显示效果 原生js鼠标悬停图标菜单滑动门显示效果 原生js鼠标悬停图标菜单滑动门显示效果
滑动门 滑动div JS 滑动门 滑动div JS
仿淘宝超漂亮的滑动门。很漂亮,很实用。非常不错。欢迎下载。
标准滑动门 标准滑动门实例 源码 标准滑动门实例 源码