tab标签（选项卡）切换实现

最新推荐文章于 2023-01-11 18:39:24 发布

宋发元

最新推荐文章于 2023-01-11 18:39:24 发布

阅读量5.6k

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/u011019141/article/details/51115951

版权

学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
		//导航栏单击变换内容
		function tabSwitch(_this,num) {
			var tag = document.getElementById("nav9");
			var number = tag.getElementsByTagName("a");   //获取导航栏元素个数(getElementsByTagName是返回元素素组)
			var divNum = document.getElementsByClassName("eachDiv");   //获取导航元素对应的div个数
			for(var i=0;i<number.length;i++){    //number是一个数组，这里应该用number.length显示它的长度5
				number[i].className = " ";   //清除所有导航栏元素的特殊样式
				divNum[i].style.display = "none";   //其他所有div都隐藏
			}
			_this.className = "l_nav1_no1";  //给当前导航栏元素添加样式
			var content = document.getElementById("l_no2_"+num);  //当前导航栏元素对应的div
			content.style.display = "block";  //显示当前导航栏元素对应的div部分
		}
	</script>
    <style type="text/css">
        .l_nav1 {
            height: 30px;
            padding-top: 8px;
        }
        .l_nav1 a{
            color: #3C3C3C;
            text-decoration: none;
            padding: 8px;
        }
        .l_nav1 a:hover,#l_nav1 a:active {
            color: green;
            text-decoration: underline;
        }
        .l_nav1 .l_nav1_no1 {   /*“头条”*/
            color: green;
            text-decoration: none;
            border-top: solid 1px green;
        }

        .l_no2 {
            background-color: #ffffff;
            border: solid 1px #E0E0E0;
            height: 282px;
            width: 276px;
            overflow: scroll;   /*当元素内容太大而超出规定区域时，内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。。*/
        }
        .l_no2 ul{     /*列表部分*/
            padding-left: 0px;
            line-height: 25px;
            font-size: 14px;;
        }
        .l_no2 ul li{
            list-style: none;
        }
        .l_no2 ul a{
            color: #3C3C3C;
            text-decoration: none;
        }
        .l_no2 ul a:active,.l_no2 ul a:hover {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav id="nav9" class="l_nav1">
        <a href="#"  οnclick="tabSwitch(this,1)" class="l_nav1_no1">头条</a>
        <a href="#"  οnclick="tabSwitch(this,2)">社会</a>
        <a href="#"  οnclick="tabSwitch(this,3)">娱乐</a>
        <a href="#"  οnclick="tabSwitch(this,4)">军事</a>
        <a href="#"  οnclick="tabSwitch(this,5)">体育</a>
    </nav>
    <div class="l_no2">
        <div id="l_no2_1" class="eachDiv" style="display: block">   <!--默认为该div显示-->
            <img src="http://www.pp3.cn/uploads/allimg/111110/15563RI9-7.jpg" width="274px">
            <ul>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">县领导找不着住建局长 对其通报批评</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">科级干部受贿近亿 庭上力保妻子清白</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">儿子将老母接回家享福 老人悬绳自尽</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">女子亲热感觉"卡" 检查现"异形"侵体</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">大妈被女童玩具小车撞到 叫来救护车</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">六旬老人遇老相识 30元发生关系被抓</a></li>
            </ul>
        </div>
        <div id="l_no2_2" class="eachDiv" style="display: none">
            <img src="http://www.pp3.cn/uploads/allimg/111110/114J0L31-5.jpg" width="274px">
            <ul>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">捐精男与受精女一见钟情 孩子已1岁</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">妻子产子收1200枚鸡蛋 丈夫1天卖光</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">男子为同房说尽好话仍遭拒 残忍杀妻</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">母猪产下八名男婴 原因竟然如此凄凉</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">小夫妻宾馆开房 隔壁大叔全程看直播</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">老汉自造房车囚禁两妙龄女 边走边玩</a></li>
            </ul>
        </div>
        <div id="l_no2_3" class="eachDiv" style="display: none">
            <img src="http://photo.enterdesk.com/2011-2-16/enterdesk.com-1AA0C93EFFA51E6D7EFE1AE7B671951F.jpg" width="274px">
            <ul>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">金星追问陈坤儿子生母 他还真招认了</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">贾静雯说“我又怀孕了”真相被曝光</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">抽烟喝酒后 成龙17岁私生女变成这样</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">台湾女星“酒后乱性” 婆婆当场傻眼</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">车晓和前夫离婚后 如此评价这段经历</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">韩国卖淫女星身份遭曝光！G.NA在列</a></li>
            </ul>
        </div>
        <div id="l_no2_4" class="eachDiv" style="display: none">
            <img src="http://h.hiphotos.baidu.com/zhidao/pic/item/6a63f6246b600c3320b14bb3184c510fd8f9a185.jpg" width="274px">
            <ul>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜愤然击落美军侦察机 美为何认怂</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">多数人不知道 中国已经买过四艘航母</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">还敢逮捕中国渔民?印尼外长开口求饶</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">揭秘辽宁舰上首位女军官 履历太吓人</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">中国两栖登陆王牌协同作战 场面壮观</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">朝鲜惊人作战计划曝光：突袭朴槿惠</a></li>
            </ul>
        </div>
        <div id="l_no2_5" class="eachDiv" style="display: none">
            <img src="http://www.pp3.cn/uploads/allimg/111111/0955412061-6.jpg" width="274px">
            <ul>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">末战胜卡塔尔不够 国足期待2队犯错</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">赛中产子属误传 产妇是辽宁女排队员</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">球迷50万赌国足赢4球以上 血本无归</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">高洪波：国足只能算一般队 比较命苦</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">段江鹏将投北京队 下赛季联手马布里</a></li>
                <li><strong style="color: #6C6C6C">·</strong><a href="#">白人小伙风骚表演 全程开启库里模式</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

宋发元

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
tab标签（选项卡）切换实现

//导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏元素个数(getElementsByTagName是返回元素素组) var divNum = do
复制链接

扫一扫