CSS选项卡

缺乏、安全感 2022-06-13 12:13 265阅读 0赞

看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码

<html>
    <head>
    	<title>css选项卡练习</title>
    
    	<style>
    		div{width:565px;height:220px;}
    		div.tabcard .nav{background-color:#ff359a;width:565px;height:21px;}
    		.nav a{text-decoration:none;float:left;text-align:center;width:140px;height:20px;
    		color:#000;margin-top:1px;margin-left:1px;background-color:white;border-bottom:1px solid #ff359a}
    		div.content{border:1px solid #ff359a;border-top:0;width:561px;height:200px;padding:1px;}
    	</style>
    	<script type="text/javascript">
    		function tabCard(e)
    		{
    			var e = window.event?window.event.srcElement:e.target;
    			document.getElementById("content").innerHTML = e.innerHTML;
    			for(i=0;i<4;i++)
    			{
    				document.getElementsByTagName("a")[i].style.borderBottom = "1px solid #ff359a";
    			}			
    			e.style.cssText = 'border-bottom:none';
    			e.blur();			//Chrome和Opera不需要
    		}
    	</script>
    </head>
    <body>
    	<div class="tabcard">
    		<div class="nav" id="nav" οnclick="tabCard(event); return false;">
    			<a href="#" class="bairen">拜仁慕尼黑</a>
    			<a href="#" class="duote">多特蒙德</a>
    			<a href="#" class="situ">斯图加特</a>
    			<a href="#" class="shaerke">沙尔克04</a>
    		</div>
    		<div class="content" id="content"></div>
    	</div>
    </body>
    </html>

![1334323654_5580.png][]

[1334323654_5580.png]: https://img-my.csdn.net/uploads/201204/13/1334323654_5580.png

发表评论取消回复

表情：

评论列表（有 0 条评论，265人围观）

还没有评论，来说两句吧...

相关阅读

相关纯css选项卡

*css选项卡** <!DOCTYPE html> <html lang="en"> <head> <meta charset="...

「爱情、让人受尽委屈。」/ 2024年04月17日 20:25/ 0 赞/ 61 阅读

相关 css系列----css 实现选项卡功能

1、纯 css 实现选项卡功能实现原理：利用css3 中input:checked 和 + ～选择器实现 ul li { float: left

爱被打了一巴掌/ 2023年07月17日 06:40/ 0 赞/ 15 阅读

相关选项卡

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2022年12月13日 04:43/ 0 赞/ 244 阅读

相关 CSS tab 选项卡(兼容好)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

左手的ㄟ右手/ 2022年09月30日 10:56/ 0 赞/ 62 阅读

相关 css3 左右滑动选项,jquery+css3下拉滑动选项卡

AboutOpen or Close She packed her seven versalia, put her initial into the belt and m

谁借莪１个温暖的怀抱￠/ 2022年09月03日 01:28/ 0 赞/ 192 阅读

相关使用css+js制作选项卡

选项卡制作 ![Image 1][] ![Image 1][] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1

古城微笑少年丶/ 2022年08月10日 10:59/ 0 赞/ 205 阅读

相关利用纯css做选项卡源码

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/c

曾经终败给现在/ 2022年06月15日 05:23/ 0 赞/ 136 阅读

相关选项卡

关于选项卡效果 1. 常规 2. 传参（可设置多个参数值） 3. 回调函数下面是几种参考方法常规方法 <!DOCTYPE html>

淩亂°似流年/ 2022年06月14日 10:37/ 0 赞/ 327 阅读

相关 CSS选项卡

看到好多大型的网站都会有一些tab选项卡，所以今天就写了一个供大家参考，代码简洁明了，不需要太多的解释，只需要注意一下兼容性问题就行了。看代码 <html>

缺乏、安全感/ 2022年06月13日 12:13/ 0 赞/ 266 阅读

相关切换选项卡+js+css+html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

柔情只为你懂/ 2022年06月04日 04:24/ 0 赞/ 244 阅读