一种tab效果展示的实现过程

来源：互联网发布：怎么在淘宝上开直播? 编辑：程序博客网时间：2024/04/29 22:20

（一）、css/tabpages.css文件代码如下：

#gallery {font:11px verdana,arial,sans-serif; width:750px; padding:15px 0 0 0; line-height:15px;}
#gallery div.off {color:#000; height:33px; margin-right:2px; line-height:33px; padding:0 20px; float:left; background:url(tabs_0.gif) repeat-x left bottom; border:1px solid #ddd; border-bottom-color:#000; cursor:pointer; position:relative; z-index:20;}
#gallery div.on {color:#c00; padding:0 20px; margin-right:2px; margin-top:1px; float:left; background:url(tabs_2.gif) repeat-x left bottom; border:1px solid #000; cursor:pointer; border-bottom:0; height:33px; line-height:32px; position:relative; z-index:100;}

div.hide {display:none; width:0; overflow:hidden;}
div.show {clear:left; background:#fff; width:708px; margin-top:0; top:-1px; border:1px solid #000;padding:20px; position:relative; z-index:50; font:11px verdana, arial, sans-serif; line-height:18px;}
div.show img {float:left; margin:0 10px 10px 0;}
.clear {clear:both;}

（二）、js/tabpages.js文件代码如下：

onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
  if (e.className == 'on' || e.className == 'off') {
  e.onclick = function () {
   var getEls = document.getElementsByTagName('DIV');
    for (var z=0; z<getEls.length; z++) {
    getEls[z].className=getEls[z].className.replace('show', 'hide');
    getEls[z].className=getEls[z].className.replace('on', 'off');
    }
   this.className = 'on';
   var max = this.getAttribute('title');
   document.getElementById(max).className = "show";
   }
  }
}
}

（三）、images/下面放几张图片

（四）、test.html页面代码如下：

<!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-Type" content="text/html; charset=gb2312" />
<title>tab效果展示</title>
<link rel="stylesheet" media="all" type="text/css" href="css/tabpages.css" />
<script src="js/tabpages.js" type="text/javascript"></script>

</head>
<body>
<div id="gallery">
<div class="on" title="Constable"><span>John Constable</span></div>
<div class="off" title="Monet"><span>Claude Monet</span></div>
<div class="off" title="Vincent"><span>Vincent Van Gogh</span></div>
<div class="off" title="Chagall"><span>Marc Chagall</span></div>
<div class="off" title="Picasso"><span>Pablo Picasso</span></div>
</div>

<div id="Constable" class="show">
<p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
<img src="tabbed_pages/constable.jpg" alt="The Hay Wain" title="The Hay Wain" />
<p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
<p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.baidu.com/">百度</a> and Bonington among others.</p>
<p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
<br class="clear" />
<p>This text is an excerpt from <a href="http://www.google.com/">谷歌</a></p>

</div>

<div id="Monet" class="hide">
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.sina.com/">新浪</a>, from whom he derived his firm predilection for painting out of doors.</p>
<img src="tabbed_pages/monet.jpg" alt="Women in the Garden" title="Women in the Garden" />
<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.csdn.com/">CSDN论坛</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://mail.126.com/">126邮箱</a>, to whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p>
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Musée d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
<p><a href="http://mail.163.com/">163邮箱</a> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
<br class="clear" />
<p>This text is an excerpt from <a href="http://www.baidu.com/">百度</a></p>
</div>

<div id="Vincent" class="hide">
<p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.baidu.com/">百度</a>.</p>
<img src="tabbed_pages/vincent.jpg" alt="The Starry Night" title="The Starry Night" />
<p>With <a href="http://www.baidu.com/">百度</a> and <a href="http://www.baidu.com/">百度</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.baidu.com/">百度</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.baidu.com/">百度</a>(1889).</p>
<br class="clear" />
<p>This text is an excerpt from <a href="http://www.baidu.com/">百度</a></p>
</div>

<div id="Chagall" class="hide">
<img src="tabbed_pages/chagall.jpg" alt="Adam and Eve" title="Adam and Eve" />
<p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
<p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
<p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of <a href="http://www.baidu.com/">百度</a>, Jean-François Millet, the Nabis and the Fauves.</p>
<br class="clear" />
<p>He was also influenced by <a href="http://www.baidu.com/">百度</a>. Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
</div>

<div id="Picasso" class="hide">
<img src="tabbed_pages/picasso.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
<p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
<p>The small Museo de Picasso in Barcelona is devoted primarily to his <a href="http://www.baidu.com/">百度</a>,which include strikingly realistic renderings of casts of ancient sculpture.</p>
<p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
<p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and <a href="http://www.baidu.com/">百度</a>,whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
<br class="clear" />
<p>....</p>
</div>
</body>
</html>