简单的选项卡功能实现

最新推荐文章于 2024-05-20 20:26:39 发布
最新推荐文章于 2024-05-20 20:26:39 发布
阅读量154 收藏
点赞数
文章标签： python java javascript ViewUI

第一种方法是用原生的js 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单选项卡</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oLi = document.getElementById("tab").getElementsByTagName("li");
var oUl = document.getElementById("content").getElementsByTagName("ul");
for(var i = 0; i < oLi.length; i++)
{
oLi[i].index = i;
oLi[i].onmouseover = function (){
for(var n = 0;n < oLi.length;n++)
{
oLi[n].className = "";
this.className = "current";
}
for(var n = 0;n <oUl.length;n++)
{
oUl[n].style.display = "none";
oUl[this.index].style.display="block";

}
}
}
}

</script>

</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">科技</li>
<li>旅游</li>
<li>娱乐</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
<li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
<li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
<li> 联想IdeaPad S405评测 性能主流续航待提升</li>
<li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>网页换肤效果</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
</ul>
<ul>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>




</ul>
<ul>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
</ul>
</div>
</div>

</body>
</html>




第二种方法是用jQuery实现，代码比第一种简洁


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单选项卡</title>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}
#tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}
#tab li.current{color:#000;background:#ccc;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

$(function(){
var timeid;
$("#tab").find("li").each(function(index){
var sLi=$(this);
sLi.mouseenter(function(){
timeid= setTimeout(function(){
sLi.addClass("current").siblings().removeClass("current");
sLi.parent().next().find("ul:eq(" + index +")").show().siblings().hide() ;
},300);
}).mouseleave(function(){
clearTimeout(timeid);
})

})
})

</script>

</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">科技</li>
<li>旅游</li>
<li>娱乐</li>
</ul>
<div id="content">
<ul style="display:block;">
<li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>
<li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>
<li>诺基亚Lumia 925评测 最好的WP8智能手机</li>
<li> 联想IdeaPad S405评测 性能主流续航待提升</li>
<li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
<li>网页换肤效果</li>
<li>联想K900内部构造 看国产神器多少国产货(组图)</li>
</ul>
<ul>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>
<li>爱上西雅图，美国全景游精选推荐 </li>




</ul>
<ul>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
<li>李安宣布辞拍美剧《暴君》：需要休息</li>
</ul>
</div>
</div>

</body>
</html>



第一种方法用原生的js是借鉴与别人的方法，第二种是我在第一个方法的基础上编写的。。。


iteye_18480
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何实现选项卡
weixin_44584477的博客
06-18 106
选项卡 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：DW JS 作者：唐俊祥 撰写时间：2019.6.17 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
选项卡的实现的几种方法
热门推荐
u014395826的博客
02-03 2万+
今天总结一下页面中选项卡实现的几种方法。在实战中会经常的使用到。下面的方法都是纯HTML+CSS，并没有用到JS，JS日后补上。 一、使用：target属性实现选项卡        页面的结构：（html） 选项卡1选项卡2 选项卡1的内容 选项卡2的内容 注意：这里要注意内联元素在元代码中若有回车，则在页面中会出现选项卡的标题之间有一个缝隙，所以如上所示，两个a
Python Gui——tkinter入门（二）
ljl20120815的博客
02-01 1595
保姆式教你GUI，%100学会！
Python之tkinter 多选项卡 Notebook
qq_1471587327的博客
03-25 1万+
文章目录Notebook 基本概念Notebook 基本应用绑定选项卡与子控件内容 Notebook 基本概念   Notebook 是一个Widget 容器控件，这个控件的特点就是有许多选项卡，当选择不同选项卡时可以看到不同的子控件内容，也可以当做子窗口内容，Notebook 是属于tkinter.ttk模块的控件 构造方法如下： Notebook(父对象, options) 参数： 第一个...
js实现简单选项卡功能
01-19
本文为大家分享了js实现简单选项卡功能的具体代码，供大家参考，具体内容如下 首先我们来写HTML代码，构建出整体结构 代码如下： <!--导航栏部分HTML代码--> 选卡1 选卡2 选卡3 选卡4 <!--内容...
Android开发之选项卡功能的实现方法示例
08-30
主要介绍了Android开发之选项卡功能的实现方法,结合实例形式分析了Android选项卡功能的原理、实现技巧与相关注意事项,需要的朋友可以参考下
原生js实现选项卡功能
11-28
原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function...
微信小程序实现选项卡功能
08-28
主要为大家详细介绍了微信小程序实现选项卡功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简易的读卡程序
02-08
利用此程序可以简单的金进行读取卡片操作 private void button1_Click(object sender, EventArgs e) { isstart = true; System.Threading.Thread thread = new System.Threading.Thread(new System.Threading.ThreadStart(DOWork)); thread.Start(); }
最简单的选项卡效果
07-31
6段代码实现选项卡效果，简单易用，快速入门
使用JS实现简单的选项卡功能
Max的博客
08-17 1万+
首先我们来写HTML代码，构建出整体结构 &amp;amp;amp;n
HTML+JavaScript实现选项卡功能
wzqnls
10-21 8459
选项卡，听上去看上去都不太高大上。实际上呢，确实不高大上。但这玩意又是网站开发中必备的一个元素，这要不会的话，一个好的网站就有些困难了。说白了，这个无非就是通过js让button和div之间发生关系，然后进行切换。 1.选项卡要实现的基本功能 （1）button与div产生关系，每个button对应不同的div （2）所有button中只有一个能处于激活状态 （3）每次切换button只显
实现简易选项卡功能
乌龟不背壳
12-31 239
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;实现简易选项卡功能&lt;/title&gt; &lt;link rel="stylesheet" href="
<web开发>选项卡切换功能
xiaruoli89的博客
11-01 4416
效果：鼠标移动到某个选项卡就显示哪个   原理：下面是5个对应的div，上面的选项卡鼠标移动到哪个就让对应的div显示其他的隐藏。 代码： id="detail_title"> onmouseover="showdiv(1)">href="">商品详情 onmouseover="showdiv(2)">href="">用
选项卡界面和功能实现
i_am_someone的博客
07-13 457
选项卡（有个样式问题）界面样式JS实现 界面样式 写了一个小demo，html代码如下： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tabBox.css"> <t...
Python，tkinter实现选项卡功能，tadwidget
m0_37542524的博客
03-18 6233
文章目录1，实现选项卡功能　－－－　代码2，效果示意 1，实现选项卡功能　－－－　代码 from tkinter import * from PIL import Image,ImageTk from queue import Queue def img_open(shape, path): img = Image.open(path) img = img.resize((...
【hackmyvm】Slowman靶机
最新发布
woshicainiao666的博客
05-20 1322
发现/secretLOGIN/login.html为登录地址，根据账号密码登录发现一个zip，但是需要密码。在FTP中得到的账号，爆破一下SSH。上传linpeas.sh文件，报一下。SSH爆破无果，试试mysql。得到用户名和加密的密码。
vue 实现选项卡功能
05-30
实现选项卡功能可以使用 Vue.js 的 v-bind 和 v-show 指令。具体步骤如下： 1. 在 data 中定义一个变量来控制选项卡的显示状态，例如 currentTab，默认为第一个选项卡。 ``` data() { return { currentTab: 'tab1...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值