ASP动态网页设计与Ajax技术----制作Tab面板

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作Tab面板</title>
</head>
<style type="text/css">
 #tab{
  margin: 0; list-style: none;
  padding: 0 0 31px;
  border-bottom: 1px solid #11a3ff;
 }
 li{
  float: left;
  background: #BBDDFF;
  margin-right: 4px; padding: 5px;
  border: 1px solid #11a3ff; height: 20px;
 }
 .cur{
  background-color: #fee;
  border-bottom: 1px solid #fee; color: red;
 }
 div{
  clear: left; padding: 10px;
  height: 100px; background-color: #Fee;
  border: 1px solid #11a3ff;
  border-top: none; display: none;
 }
 .divcur{display: block;}
 </style>
<body><script src="jquery-3.4.1.min.js"></script>
 <script>
 $(function(){
  $("#tab li").each(function(index){
   $(this).mouseover(function(){
    $("div.divcur").removeClass("divcur");
    $("li.cur").removeClass("cur");
    $("div:eq("+index+")").addClass("divcur");
    $("li").eq(index).addClass("cur");
   });
  });
 });
 </script>
 <ul id="tab">
 <li class="cur">课程特色</li>
  <li>教学方法</li>
  <li>教学效果</li>
 </ul>
 <div class="divcur">本课程主要特色</div>
 <div>教学方法和教学手段</div>
 <div>教学效果</div>
</body>
</html>

原文地址:https://www.cnblogs.com/sihuan/p/12091568.html

时间: 2024-10-08 23:06:08

ASP动态网页设计与Ajax技术----制作Tab面板的相关文章

ASP动态网页设计与Ajax技术----制作折叠式菜单

<!doctype html><html><head><meta charset="utf-8"><title>制作折叠式菜单</title></head><style type="text/css"> ul{list-style: none; margin: 0; padding: 0;} #accordion{width: 200px;} #accordion li{

ASP动态网页设计与Ajax技术----制作图片轮显效果

<!doctype html><html><head><meta charset="utf-8"><title>制作图片轮显效果</title></head><style type="text/css"> img{border: 0px;} .imgsBox{overflow: hidden; width: 282px; height: 176px;} .imgs a{d

Java Web学习(2):静态网页与动态网页

一静态网页 (1)静态网页概述 在网站设计中,纯粹HTML(标准通用标记语言下的一个应用)格式的网页通常被称为"静态网页",静态网页是 标准的HTML文件,它的文件扩展名是.htm..html,可以包含文本.图像.声音.FLASH动画.客户端脚本和ActiveX 控件及JAVA小程序等.静态网页是网站建设的基础,早期的网站一般都是由静态网页制作的. 静态网页是相对于动态网页而言,是指没有后台数据库.不含程序和不可交互的网页.静态网页相对更新起来比 较麻烦,适用于一般更新较少的展示型网站

asp.net webform设计思路的思考

我使用asp.net的webform框架进行web应用程序的开发已经差不多四年了,在整个开发生涯中,也使用过一年asp.net的mvc框架.因为网上经常有讨论webform框架和mvc框架的优劣,所以自己也对这两者进行了关注,因为自己最熟悉webform框架,所以就会考虑它的优势是什么?设计思路是什么? 要理解asp.net的设计思路,必须考虑它的产生年代,产生的技术基础,还有观察同时代其他动态网页技术的特点和思路. 首先是产生asp.net的技术基础,以下援引百度百科:    "1996年,A

动态网页开发基础

什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解C/S(Clien

静态/动态网页-动静之间

经过新闻系统的实践之后还不太了解什么是静态网页,什么是动态网页,在学习了Asp.net之后对静态网页和动态网页做一个新的认识.在网页制作中,静态网页是动态网页制作的基础,我们要想学习好动态网页设计,首先必须对静态网页有一个全面的认识. 静态网页 静态网页使用超文本标记语言,是标准的HTML文件,无法与用户产生互动的网页.静态网页只能够单纯地显示网页的内容,相当于是展览中画纸上的一幅画,只是展示出来,而无法像现在使用的浏览器那样,对我们的操作做出响应. 优点: a.一经发布到服务器,静态网页保存在

第一章---动态网页开发基础

动态网页开发基础 什么是动态网页? 误区: 初学者一般认为动态网页,就是会动的网页,实际上不是这样的. 动态网页: 是指在服务器端进行的,使用程序语言设计的交互式网页,它们会 根据某种条件的变化,返回不同的网页内容. 动态网页的优势: 1.交互性:即网页会根据用户的要求和选择而动态改变和显示内容 2.自动更新:即无须改变页面代码,便会自动生成新的页面内容,可以节省工作量 3.随机性:即当不同的时间,不同的人访问同一网址时会产生不同的页面效果 为什么学习B/S架构技术? 在学习B/S架构前,先了解

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

网页设计 Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程 更多&gt;

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut