查看本章节

查看作业目录

需求说明：

制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还可以设置其背景样式

实现思路：

  1. 编写 HTML 页面，在页面中添加 Tab、内容版块，以及对应的 CSS 样式
  2. 为每个 Tab 元素添加点击事件，并将 Tab 元素的位置作为参数值传入
  3. 在 JavaScript 脚本中创建点击事件的处理函数
  4. 通过 document 对象找到对应的 Tab 元素及版块内容，并修改其样式
  5. 使用浏览器预览效果

实现代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title></title>

		<style type="text/css">

			h2{

				border-top: solid blue 1px;

				border-left: solid blue 1px;

				border-bottom: solid blue 1px;

				width: 100px;

				height: 35px;

				margin: 0;

				float: left;

				text-align: center;

			}

			.tab-content{

				margin-top: 10px;

				border: solid blue 1px;

				width: 402px;

				height: 400px;

			}

			.tab-content div{

				display: none;

			}

			.current{

				background-color: pink;

			}

			.tab-content .show{

				display: block;

			}

		</style>

	</head>

	<body>

		<div class="tab-head">

			<h2 class="current" onclick="changeTab(0)">热点</h2>

			<h2 onclick="changeTab(1)">娱乐</h2>

			<h2 onclick="changeTab(2)">段子</h2>

			<h2 onclick="changeTab(3)">体育</h2>

		</div>

		<div class="tab-content">

			<div class="show">本页面内容显示热点新闻</div>

			<div>本页面内显示娱乐新闻</div>

			<div>本页面内显示搞笑段子</div>

			<div>本页面内显示体育新闻</div>

		</div>

		<script type="text/javascript">

			var tabs = document.getElementsByClassName("tab-head")[0].getElementsByTagName("h2");

			var contents = document.getElementsByClassName("tab-content")[0].getElementsByTagName("div");

			function changeTab(index){

				for (var i=0;i<tabs.length;i++) {

					if (i==index) {

						tabs[i].className="current";

						contents[i].className="show";

					} else{

						tabs[i].className="";

						contents[i].className="";

					}

				}

			}

		</script>

	</body>

</html>

制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还的更多相关文章

  1. css实现table中td单元格鼠标悬浮时显示更多内容

    table中,td单元格无法显示下全部内容,需要在鼠标hover时显示全部内容. 正常显示样式: 鼠标hover时: html: <td>displayAddress<span cl ...

  2. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  3. 笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

    笔记第一部分:http://www.cnblogs.com/zczhangcui/p/6869219.html 在第一部分遇到的问题是,用ajax获取了一系列列表信息后,拼接好html后插入到了原有页 ...

  4. JAVA中让Swagger产出更加符合我们诉求的描述文档，按需决定显示或者隐藏指定内容

    大家好,又见面啦. 在前一篇文档<JAVA中自定义扩展Swagger的能力,自动生成参数取值含义说明,提升开发效率>中,我们探讨了如何通过自定义注解的方式扩展swagger的能力让Swag ...

  5. javascript学习内容--改变样式、取消设置、显示内容、隐藏内容

    <head> <style> body{font-size:12px;} #txt{ height:400px; width:600px; border:#333 solid ...

  6. table中td文字超出长度用省略号隐藏超出内容，鼠标点击内容全部显示

    1,设置css样式 <style>table {width: 100%;float: left;table-layout:fixed;width:600px;border:1px soli ...

  7. js勾选时显示相应内容

    使用环境,一.比如用户勾选时显示一些安全方面提示“你真的要自动登录吗?这将使你下次不需要密码即可进入你的个人中心.”二.显示其他预设选项,以方便用户选择输入,比如密保问题设置,当用户不想使用自定义设置 ...

  8. selenium如何高亮某元素和操作隐藏的内容

    高亮元素的思路是: 1.找到要高亮的元素 2.对该元素执行js,更改style达到高亮效果. 操作隐藏的内容思路: 1.可以用Actions的moveToElement,使鼠标悬停在触发隐藏内容的元素 ...

  9. IntelliJ idea鼠标移动到类上显示文档document（javadoc）内容

    IntelliJ idea鼠标移动到类上显示文档document(javadoc)内容 Step 1:设置鼠标移动到类上自动显示Javadoc文档 step2:为jdk下载javadoc Step3: ...

随机推荐

  1. ybatis中查询出多个以key,value的属性记录,封装成一个map返回的方法

    可以采用值做映射,也可以不采用映射方式 <resultMap id="configMap" type="java.util.Map" > <r ...

  2. 【Linux】【Services】【VersionControl】git-daemon, httpd, mysql搭建带认证的gitserver

    1. 简介: 比较低端的gitserver,使用centos自带的git-daemon搭建gitserver,使用httpd做上传和下载,利用mod_auth_mysql做认证 2. 环境 # Apa ...

  3. tomcat 之 httpd session stiky

    # 注释中心主机 [root@nginx ~]# vim /etc/httpd/conf/httpd.conf #DocumentRoot "/var/www/html" #:配置 ...

  4. maven管理本地jar包

    maven作为包管理工具,好处不必多说.但是有些情况,比如需要引入第三方包,如快递鸟,支付宝,微信等jar包(当然有可能直接提供maven依赖),如果直接下载到本地之后,怎么整合到自己的maven工程 ...

  5. 通过js禁用浏览器的回退事件

    js代码: <script> history.pushState(null, null, document.URL); window.addEventListener('popstate' ...

  6. 【JAVA今法修真】 第一章 今法有万象 百家欲争鸣

    大家好,我是南橘,因为这段时间很忙,忙着家里的事情,忙着工作的事情,忙着考试的事情,很多时候没有那么多经历去写新的东西,同时,也是看了网上一些比较新颖的文章输出方式,自己也就在想,我是不是也可以这样写 ...

  7. Java高精度基础+开根

    在焦作站的acm网络赛中遇到了一个高精度开根的水题--但是那时候WA了 后面学写java补题还T了orz 所以写一篇文章来记录一下java的大整数类型的基础和开根还有一点心得体会吧 首先给那一题的题面 ...

  8. shell脚本 比较mysql配置文件

    一.简介 源码地址 日期:2019/12/19 介绍:较两个mysql实例的配置是否一致,支持比较配置文件,也支持比较系统变量的值 效果图: 二.使用 适用:centos6+ 语言:中文 注意:无 下 ...

  9. 时间同步——TSN协议802.1AS介绍

    前言之前的主题TSN的发展历史和协议族现状介绍了TSN技术的缘起,最近一期的主题TSN协议导读从定时与同步.延时.可靠性.资源管理四个方面,帮助大家了解TSN协议族包含哪些子协议,以及这些子协议的作用 ...

  10. 【js基础】基础数据类型变量为啥有属性？

    1.变量和数值 let a =1 这是一个简单的变量声明,其中"a"是变量,在代码中供程序员或者语法操作的,而1是数值,是我最终需要的东西.为什么不直接使用数值而使用变量?这个就不 ...