Use css and js to achieve the effect of web page tabs

Everyone must have noticed the tab effect when browsing the web. Its advantage is to merge multiple pieces of content into one piece and reduce the length of the content. There is a good example below, which is completed using css js. Personally It feels pretty good. Friends who are interested should not miss it

nbsp;html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
 
 
<title>css选项卡(html组件)</title> 
<link> 
<meta> 
<meta> 
<meta> 
<style> 
p.card p{ background-color:#FF8000; float:left; padding:1px; padding-bottom:0; clear:both; width:405px;} 
p.card a{ color:black; font-size:14px; text-decoration:none; float:left; width:100px; text-align:center; background-color:white; margin-right:1px;} 
p.card p.home a.home{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.international a.international { font:normal normal bold 14px/1.5 宋体;} 
p.card p.sport a.sport{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.finance a.finance{ font:normal normal bold 14px/1.5 宋体;} 
p.card p.content{ background-color:white; border:1px solid #ff8000; height:100px;} 
</style> 
<script> 
var shq={} 
shq.cmenu=function(e) 
{ 
var e=window.event?window.event.srcElement:e.target; 
if(/a/i.test(e.tagName)){ 
e.parentNode.className=e.className; 
e.parentNode.nextSibling.innerHTML=e.innerHTML; 
e.parentNode.nextSibling.style.cssText=&#39;border-top:none&#39;; 
e.blur(); 
} 
} 
</script> 
 
 
<p> 
</p><p> 
<a>国内</a> 
<a>国际</a> 
<a>体育</a> 
<a>财经</a> 
</p><p></p> 
 
<p> 
</p><p> 
<a>国内</a> 
<a>国际</a> 
<a>体育</a> 
<a>财经</a> 
</p><p></p> 
 
<p> 
</p><p> 
<a>国内</a> 
<a>国际</a> 
<a>体育</a> 
<a>财经</a> 
</p><p></p> 
 
 
<script> 
var now = new Date(); 
document.write("<img src="/static/imghwm/default1.png"  data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter"  class="lazy"  src=&#39;http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer="+escape(document.referrer)+"&rand="+ now.getTime() + "&cur="+escape(document.URL)+"&#39; border=&#39;0&#39; alt=&#39;&#39;    style="max-width:90%"); 
</script> 
<noscript> 
<img  src="/static/imghwm/default1.png" data-src="http://counter.yesky.com/counter.shtml?CID=54197&AID=-1&refer=noscriptcounter&cur=noscriptcounter" class="lazy" alt="Use css and js to achieve the effect of web page tabs" > 
</noscript>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Use css3 to imitate the start menu of window7

##Use Flexbox in CSS to achieve centering The method to achieve the effect

The above is the detailed content of Use css and js to achieve the effect of web page tabs. For more information, please follow other related articles on the PHP Chinese website!