改变li标签的className以及改变content的display属性 {选项卡的制作}

html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选项卡的制作</title>
<script src="../js/try.js"></script>
<style type="text/css">
ul#tabNav{
width:400px;
list-style:none;
border-bottom:1px solid green;
margin:0;
padding-left:0;
padding-bottom:26px;
*padding-bottom: 0;
}
ul#tabNav li{
float:left;
height:25px;
margin:0 10px -2px 0;
background-color:green;
color:black;
border:1px solid green;
border-bottom:0;
padding:0;
}
ul#tabNav a:link ,ul#tabNav a:visited {
display:block;
text-decoration:none;
padding:5px 10px 3px 10px;
}
#tabContent{
width:400px;
height:200px;
border:1px solid green;
border-top-width: 0;
}
#tabNav li.tabSelected{
background-color:#ffcc00;
color:#fff;
}
</style>
</head>
<body>
<ul id="tabNav">
<li onmouseover="showContent(1)" id="tab1" class="tabSelected">
<a href="">新闻</a>
</li>
<li onmouseover="showContent(2)" id="tab2" class="">
<a href="">体育</a>
</li>
<li onmouseover="showContent(3)" id="tab3" class="">
<a href="">娱乐</a>
</li>
</ul>
<div id="tabContent">
<div id="content1">新闻内容</div>
<div id="content2" style="display:none">体育内容</div>
<div id="content3" style="display:none">娱乐内容</div>
</div>
</body>
</html>

JS

function showContent(index){ /*展示第index个内容*/
var e = document.getElementById("content"+index); /*先将第index的div元素取到*/
e.style.display=""; /*将当前的display设置“”,即显示*/
for(var i=1;i<4;i++){
if(i != index){
var e2 = document.getElementById("content"+i);
e2.style.display="none";
document.getElementById("tab"+i).className=""; /*不是当前选中的则清空className*/
}
else{
document.getElementById("tab"+i).className="tabSelected"; /*将当前选中的设置为tabSelected*/
}
}
}

时间: 2024-11-05 11:34:04

改变li标签的className以及改变content的display属性 {选项卡的制作}的相关文章

JavaScript:改变li前缀图片和样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档<

Html 改变原有标签属性

内容简要: 当标签内内容 达到某以条件的时候改变当前标签属性 例如原标签为<tr> 当tr内的值符合某一条件时把<tr>变成<a>标签 例:当订单状体编程已支付的时候把该标签改成超链接“去评论” var pay = $("#"+obj.data[i]['pk']).html() if(pay == '已支付'){ $("#pay"+obj.data[i]['pk']).replaceWith('<a href="i

查找Dom树中所有&lt;li&gt;的元素,并改变其内容

首先:所有的<li>不在同一列表,并分布在不同段落! 解:用不同的CSS选择器去选择DOM中的某一部分 CSS                           JQuery p {...}  选择所有段落          $("p"); #container{...}                 $("#container"); .articles{...}                      $(".articles"

用ul、li标签 创建css横向导航菜单?(转)

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似乎是

li标签之间的空隙问题(转)

原文地址:http://www.cnblogs.com/laogao/archive/2012/08/13/2636419.html css li 空隙问题 IE6/7的Bug:纵向排列的li中加浮动元素产生向下3px的空隙 最近做页面时,经常碰到用 li 标签做纵向列表的时候,会在li的下面产生3px的空隙,之前也碰到过,但都用简单的方法解决了.搜索了一下,网上已经有人给出一些解决方案,但细看之后发现他们的解决方案和找到的原因都有些问题,甚至是错误.要么只单纯地提出问题,解决问题,没有更详细的

js改变元素的class来实现改变元素的CSS样式

<!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-

前端学习笔记(zepto或jquery)——对li标签的相关操作(三)

对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+":"+ item.innerHTML); }); $("ul>li").each(function(index,item){ alert(index+":"+ item.innerHTML); }); $("ul>li").ea

bootstrap中的动态加载出来的图片轮播中的li标签中的class=&quot;active&quot;的动态添加移除

//该方法是在slide改变时立即触发该事件, $('#myCarousel').on('slide.bs.carousel', function () { $("#myCarousel ol li").toggleClass("active");//重复切换类名“active” }); 遇到的问题:在动态加载出来的轮播中设置了加载时就开始轮播data-ride="carousel"图片可以轮播但是底下的li标签的class没有进行切换.而不加d

关于li标签行内显示的问题

在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&quo