CSS选项卡

缺乏、安全感 2022-06-13 12:13 238阅读 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 条评论，238人围观）

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

相关阅读

相关选项卡

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

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

相关 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 赞/ 178 阅读

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

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

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

相关 js选项卡

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

阳光穿透心脏的1/2处/ 2022年07月30日 13:55/ 0 赞/ 214 阅读

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

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

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

相关利用纯css做选项卡知识点

CSS3 :checked 伪类选择器妙用可以利用checked做出选项卡。 CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中

曾经终败给现在/ 2022年06月15日 03:25/ 0 赞/ 411 阅读

相关选项卡

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

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

相关 CSS选项卡

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

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

相关切换选项卡+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 赞/ 216 阅读

相关 JavaScript+CSS生成静态水平选项卡效果

本文介绍一种使用JavaScript+Css设计生成的选项卡效果，只是这里的选项卡是静态的！制作过程很简单，这里我使用的语言是asp.net（vs

女爷i/ 2022年05月24日 07:19/ 0 赞/ 161 阅读