守望麦香花开
- 浏览: 49502 次
-
文章分类
最新评论
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
li {
list-style-type: none;
width:50px;
float: left;
}
.tab {
width: 400px;
height: 400px;
border: 1px solid red
}
.tab_menu {
width: 400px;
height: 100px;
border: 1px solid red
}
.tab_box {
width: 400px;
height: 300px;
border: 1px solid red
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
$(".hide").hide();
//单击li时进行高亮显示
$div_li= $("div.tab_menu ul li");
$("div.tab_menu ul li").click(function(){
//当前li高亮,并且去掉其他同辈li元素的高亮显示
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前选中的li所在全部li元素中的索引。
var index= $div_li.index(this);
//选取子节点 ,显示li元素对应的div元素，隐藏其他几个同辈的div元素
$("div.tab_box > div").eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div><img alt="图片找不到" src="images/sjw.png"></div>
<div class="hide"><img alt="图片找不到" src="images/6.jpg"></div>
<div class="hide"><img alt="图片找不到" src="images/1.jpg"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>网页选项卡</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style type="text/css">
li {
list-style-type: none;
width:50px;
float: left;
}
.tab {
width: 400px;
height: 400px;
border: 1px solid red
}
.tab_menu {
width: 400px;
height: 100px;
border: 1px solid red
}
.tab_box {
width: 400px;
height: 300px;
border: 1px solid red
}
.selected{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
$(".hide").hide();
//单击li时进行高亮显示
$div_li= $("div.tab_menu ul li");
$("div.tab_menu ul li").click(function(){
//当前li高亮,并且去掉其他同辈li元素的高亮显示
$(this).addClass("selected").siblings().removeClass("selected");
//获取当前选中的li所在全部li元素中的索引。
var index= $div_li.index(this);
//选取子节点 ,显示li元素对应的div元素，隐藏其他几个同辈的div元素
$("div.tab_box > div").eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div><img alt="图片找不到" src="images/sjw.png"></div>
<div class="hide"><img alt="图片找不到" src="images/6.jpg"></div>
<div class="hide"><img alt="图片找不到" src="images/1.jpg"></div>
</div>
</div>
</body>
</html>
分享到：
发表评论
-
validate自动校验
2016-09-23 15:32 1067<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 497jQuery 的选择器可谓之强 ... -
JQuery的extend扩展
2016-09-18 15:23 435JQuery的extend扩展方法： Jquery ... -
jquery实现全选，全不选，反选效果
2016-09-13 15:41 440<!DOCTYPE html PUBLIC " ... -
jquery实现全选，全不选，反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 502var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1918jquery对对象数组的遍历的两种方式 data: [ { ... -
query，bootstrap在开发中使用的总结
2016-08-24 09:50 607当ajax请求返回的数据date如上面所显示，要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 790select 初始化值，option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值，option 的value是id,内容 ... -
bootstrap日期插件daterangepicker的使用
2016-08-22 10:59 922今天用的了bootstrap日期插件感觉搜索的资料不是很多在此 ... -
Jquery选择器
2016-08-19 10:08 651JQuery: 一：入门 二：选择器 三：DOM操作 四：事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 546Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 429在www.json.org上公布了很多JAVA下的json ... -
HTML5时钟
2016-08-18 12:31 519本示例使用HTML5的canvas标签和Javascript脚 ... -
同步更新input中的内容
2016-08-16 14:15 540HTML： <div class="form ... -
JQuery验证
2016-08-16 09:46 518js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 504一、用前必备 转载：http://www.cnblogs.c ...
相关推荐
实现选项卡切换功能，功能完善，界面美观，操作方便！
在LabVIEW中，选项卡切换是一种常见且实用的功能，它允许用户在一个单一的界面中组织和切换不同的工作区，类似于网页浏览器中的标签页。这种功能可以极大地提升用户界面的易用性和工作效率。 标题“选项卡切换_...
javascript选项卡切换，网页选项卡切换
至此，一个简单的纯JavaScript实现的网页选项卡切换效果就完成了。这种实现方式不仅适用于静态网页，也可以应用于动态加载的内容，只需要稍作调整即可。通过这样的实践，你可以更好地理解DOM操作、事件监听以及CSS...
jQuery 实现选项卡切换的步骤通常包括以下几步： 1. **HTML 结构**：首先，你需要在 HTML 中设置好选项卡的基本结构。每个选项卡头应该有一个唯一的 ID 或类名，以便于 jQuery 识别。同时，将所有内容隐藏，只显示...
总之，这个项目展示了如何利用jQuery创建具有二级嵌套选项卡切换和二维码展示功能的动态网页。通过理解和实践这样的代码，开发者可以提升在网页交互设计方面的技能，同时也能提高用户体验。在实际开发中，可以依据...
移动端选项卡切换是网页设计中常用的一种交互方式，特别是在移动设备上，由于屏幕空间有限，这种设计能够有效地组织信息并提高用户体验。通常，选项卡会展示多个相关的、独立的部分，用户可以通过点击或滑动来切换...
选项卡切换效果，网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页设计！网页...
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许用户通过点击不同的标签来查看和切换不同的内容区域，从而提高页面的可读性和用户体验。本文将深入探讨如何实现Tab选项卡的延迟切换和自动切换效果，这两种...
本教程将聚焦于利用jQuery来制作一个滑动选项卡切换插件，即“slider滑动选项卡切换”。这种组件常见于网站的导航、展示内容或者产品介绍中，能够以动态、吸引人的形式展示信息。 首先，我们需要理解jQuery的基本...
总的来说，"图标选项卡特效_图标控制选项卡切换代码"是一个使用JavaScript和可能的jQuery实现的网页交互设计。它通过图标控制内容的展示，提高了用户的交互体验，适用于需要清晰分类和展示信息的网站。对于开发者来...
本文将详细介绍如何使用JavaScript（js）和层叠样式表（css）来实现一个简单的选项卡切换功能，并通过分析`demo.html`文件来展示具体的实现步骤。 首先，我们需要在HTML文件中创建基本的结构。一个典型的选项卡布局...
本文将深入探讨“jQuery仿京东商品分类选项卡切换代码”，这是一个利用jQuery库，尤其是jquery.SuperSlide插件，来创建的高效、交互性强的网页组件。 首先，我们来理解jQuery的核心概念。jQuery是一个轻量级的...
"H5选项卡左右切换"是一种常见的网页设计模式，常用于展示多组相关但内容独立的信息，如产品介绍、新闻列表或者用户评论等。这种设计模式使得页面内容组织清晰，同时也提升了用户的浏览体验。 在HTML5中，我们可以...
本教程主要涵盖两个关键的网页交互效果：图片切换和选项卡切换。这两种效果在现代网页设计中非常常见，常用于展示产品、分享信息或者构建动态用户界面。 首先，我们来看图片切换效果。图片切换通常用于展示一组相关...
在网页设计和开发中，"选项卡切换效果"是一种常见的用户界面交互元素，它允许用户在有限的空间内浏览和切换不同的内容区域。这种效果通常应用于展示多组相关但不需同时显示的信息，如产品详情、用户评论或设置选项等...
在网页设计中，Tab选项卡是一种常见的用户界面元素，它允许用户通过点击不同的标签来查看和操作相关的区域内容。在JavaScript（简称js）的帮助下，...不断学习和实践，你将能够创建更加复杂和个性化的选项卡切换效果。
总结，JavaScript选项卡切换是网页动态交互的重要手段，它结合了HTML、CSS和JavaScript的精华，通过精心设计的用户界面和交互逻辑，提高网页的信息组织和浏览效率。理解其工作原理和实现方式，有助于开发者构建更加...
2. **鼠标点击切换**：这是最常见的选项卡切换方式，用户点击选项卡标题来显示对应的内容。这种方式直观且易于理解，是大多数选项卡插件的默认行为。 3. **自动切换**：该功能使选项卡能按照设定的时间间隔自动循环...
【标题】"js鼠标滑过标签选项卡切换代码"是一个基于JavaScript实现的交互式网页设计元素，常用于网站导航或信息展示。这种效果允许用户通过鼠标悬停在不同的标签上，来切换显示不同的内容区域。在医院美容网站中，...