Home > Developer > CSS

Web page tab code (JS+CSS compatible with IE FF)

Source: Internet
Author: User
Tags file upload odbc mysql create mysql delete mysql insert mysql tutorial mysql update mysql connect
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Today to put your own website tutorial channel to add a page tab effect, Tab tab function is in the same size space can put more content. Let's take a look at the tab code below.


<!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> webpage tab Code (JS+CSS tutorial compatible IE FF) </title>


<script>


function Ntabs (thisobj,num) {


if (Thisobj.classname = = "active") return;


var tabobj = thisobj.parentnode.id;


var tablist = document.getElementById (tabobj). getElementsByTagName ("Li");


For (i=0 i <tablist.length; i++) {


if (i = = num) {


Thisobj.classname = "active";


document.getElementById (tabobj+ "_content" +i). Style.display = "block";


}else{


Tablist[i].classname = "normal";


document.getElementById (tabobj+ "_content" +i). Style.display = "None";


}


}


}


</script>


<style type= "Text/css" >


a{


font-size:12px;


}

/********tab tab Change end**********/

Ul,li {margin:0px;padding:0px;}
#wentab0 {float:right; width:950;}
#wentab0 li{width:164px; line-height:23px; height:31px; float:left; text-align:center; margin-right:0px; list-style-type:none;padding:0px;}
#wentab0. active{background: #4e9b00; /*background:url (yun_qi_img/topbg.jpg); * * FONT-SIZE:12PX; Color: #fff; Font-weight:bold; Cursor:pointer;}
#wentab0. normal{background: #e6ffe6;/*background:url (yun_qi_img/titlebg.jpg); * * FONT-SIZE:12PX; cursor:pointer;}


. tle{width:100%; margin:0px Auto;
. tabcr{Clear:both; width:930px;padding:5px 10px 5px 25px; line-height:24px;}
. TABCR a{
Display:block;
width:117px;
Float:left;
Overflow:hidden;
}
. PHP tutorials tab{height:110px;
. bordercolor{border:1px solid #bac9b3;}

</style>

&lt;body&gt;


&lt;div class= "Phptab bordercolor" &gt;


&lt;div class= "Tle" &gt;


&lt;ul id= "Wentab0" &gt;


&lt;li class= "Active" Onmouseo Tutorial ver= "Ntabs (this,0);" &gt;php Foundation &lt;/li&gt;


&lt;li class= "Normal" onmouseover= "Ntabs (this,1);" &gt;php Advanced &lt;/li&gt;


&lt;li class= "Normal" onmouseover= "Ntabs (this,2);" &gt;php Database Tutorials &lt;/li&gt;


&lt;li class= "Normal" onmouseover= "Ntabs (this,3);" &gt;php xml&lt;/li&gt;


&lt;li class= "Normal" onmouseover= "Ntabs (this,4);" &gt;php and Ajax&lt;/li&gt;


&lt;li class= "Normal" onmouseover= "Ntabs (this,5);" &gt;php Reference Manual &lt;/li&gt;


&lt;/ul&gt;


&lt;div class= "TLECR" &gt;


&lt;div id= "wentab0_content0" class= "TABCR" &gt;


&lt;a title= "php Tutorials" href= "http://www.111cn.net/w3school/php/index.htm" &gt;php tutorials &lt;/a&gt;


&lt;a title= "Introduction to PHP" href= "http://www.111cn.net/w3school/php/php_intro.htm" &gt;php profile &lt;/a&gt;


&lt;a title= "PHP Installation" href= "http://www.111cn.net/w3school/php/php_install.htm" &gt;php installation &lt;/a&gt;


&lt;a title= "PHP Syntax" href= "http://www.111cn.net/w3school/php/php_syntax.htm" &gt;php syntax &lt;/a&gt;


&lt;a title= "PHP variable" href= "http://www.111cn.net/w3school/php/php_variables.htm" &gt;php variable &lt;/a&gt;


&lt;a title= "php string" href= "http://www.111cn.net/w3school/php/php_string.htm" &gt;php string &lt;/a&gt;


&lt;a title= "php operator" href= "http://www.111cn.net/w3school/php/php_operators.htm" &gt;php operator &lt;/a&gt;


&lt;a title= "PHP if...else statement" href= "http://www.111cn.net/w3school/php/php_if_else.htm" &gt;php if...else&lt;/a&gt;


&lt;a title= "PHP switch Statement" href= "http://www.111cn.net/w3school/php/php_switch.htm" &gt;php switch&lt;/a&gt;


&lt;a title= "php array" href= "http://www.111cn.net/w3school/php/php_arrays.htm" &gt;php array &lt;/a&gt;


&lt;a title= "PHP loop" href= "http://www.111cn.net/w3school/php/php_looping.htm" &gt;php cycle &lt;/a&gt;


&lt;a title= "php function" href= "http://www.111cn.net/w3school/php/php_functions.htm" &gt;php function &lt;/a&gt;


&lt;a title= "php form and user input" href= "http://www.111cn.net/w3school/php/php_forms.htm" &gt;php form &lt;/a&gt;


&lt;a title= "php $_get" href= "http://www.111cn.net/w3school/php/php_get.htm" &gt;php $_get&lt;/a&gt;


&lt;a title= "php $_post" href= "http://www.111cn.net/w3school/php/php_post.htm" &gt;php $_post&lt;/a&gt;


&lt;/div&gt;


&lt;div id= "Wentab0_content1" class= "tabcr" style= "Display:none"; &gt;


&lt;a title= "php date" href= "http://www.111cn.net/w3school/php/php_date.htm" &gt;php date &lt;/a&gt;


&lt;a title= "PHP reference" href= "http://www.111cn.net/w3school/php/php_includes.htm" &gt;php reference &lt;/a&gt;


&lt;a title= "php file" href= "http://www.111cn.net/w3school/php/php_file.htm" &gt;php file &lt;/a&gt;


&lt;a title= "php file Upload" href= "http://www.111cn.net/w3school/php/php_file_upload.htm" &gt;php file upload &lt;/a&gt;


&lt;a title= "php cookies" href= "http://www.111cn.net/w3school/php/php_cookies.htm" &gt;php cookies&lt;/a&gt;


&lt;a title= "PHP Sessions" href= "http://www.111cn.net/w3school/php/php_sessions.htm" &gt;php sessions&lt;/a&gt;


&lt;a title= "PHP e-mail" href= "http://www.111cn.net/w3school/php/php_mail.htm" &gt;php e-mail&lt;/a&gt;


&lt;a title= "PHP secure e-mail" href= "http://www.111cn.net/w3school/php/php_secure_mail.htm" &gt;php security e-mail&lt;/a&gt;


&lt;a title= "PHP error" href= "http://www.111cn.net/w3school/php/php_error.htm" &gt;php error&lt;/a&gt;


&lt;a title= "PHP exception" href= "http://www.111cn.net/w3school/php/php_exception.htm" &gt;php exception&lt;/a&gt;


&lt;a title= "PHP filter" href= "http://www.111cn.net/w3school/php/php_filter.htm" &gt;php filter&lt;/a&gt;


&lt;/div&gt;


&lt;div id= "Wentab0_content2" class= "tabcr" style= "Display:none"; &gt;


&lt;a title= "Introduction to the MySQL Tutorial" href= "http://www.111cn.net/w3school/php/php_mysql_intro.htm" &gt;mysql profile &lt;/a&gt;


&lt;a title= "MySQL Connect" href= "http://www.111cn.net/w3school/php/php_mysql_connect.htm" &gt;mysql connect&lt;/a &gt;


&lt;a title= "MySQL create" href= "http://www.111cn.net/w3school/php/php_mysql_create.htm" &gt;mysql create&lt;/a&gt;


&lt;a title= "MySQL insert" href= "http://www.111cn.net/w3school/php/php_mysql_insert.htm" &gt;mysql insert&lt;/a&gt;


&lt;a title= "MySQL select" href= "http://www.111cn.net/w3school/php/php_mysql_select.htm" &gt;mysql select&lt;/a&gt;


&lt;a title= "MySQL where" href= "http://www.111cn.net/w3school/php/php_mysql_where.htm" &gt;mysql where&lt;/a&gt;


&lt;a title= "MySQL Order by" href= "http://www.111cn.net/w3school/php/php_mysql_order_by.htm" &gt;mysql order by&lt;/a &gt;


&lt;a title= "MySQL update" href= "http://www.111cn.net/w3school/php/php_mysql_update.htm" &gt;mysql update&lt;/a&gt;


&lt;a title= "MySQL delete" href= "http://www.111cn.net/w3school/php/php_mysql_delete.htm" &gt;mysql delete&lt;/a&gt;


&lt;a title= "php ODBC" href= "http://www.111cn.net/w3school/php/php_db_odbc.htm" &gt;php odbc&lt;/a&gt;


&lt;/div&gt;


&lt;div id= "Wentab0_content3" class= "tabcr" style= "Display:none"; &gt;


&lt;a title= "XML expat Parser" href= "http://www.111cn.net/w3school/php/php_xml_parser_expat.htm" &gt;xml expat parser &lt;/a&gt;


&lt;a title= "XML dom" href= "http://www.111cn.net/w3school/php/php_xml_dom.htm" &gt;xml dom&lt;/a&gt;


&lt;a title= "xml simplexml" href= "http://www.111cn.net/w3school/php/php_xml_simplexml.htm" &gt;xml simplexml&lt;/a &gt;


&lt;/div&gt;


&lt;div id= "Wentab0_content4" class= "tabcr" style= "Display:none"; &gt;


&lt;a title= "Introduction to Ajax" Href= "http://www.111cn.net/w3school/php/php_ajax_intro.htm" &gt;ajax profile &lt;/a&gt;


&lt;a title= "Ajax XMLHttpRequest" href= "http://www.111cn.net/w3school/php/php_ajax_xmlhttprequest.htm" &gt; Xmlhttprequest&lt;/a&gt;


&lt;a title= "PHP and AJAX Requests" href= "http://www.111cn.net/w3school/php/php_ajax_suggest.htm" &gt;ajax suggest&lt;/a&gt;


&lt;a title= "PHP and Ajax XML Instances" href= "http://www.111cn.net/w3school/php/php_ajax_xml.htm" &gt;ajax


&lt;a title= "PHP and Ajax MySQL database instance" href= "http://www.111cn.net/w3school/php/php_ajax_database.htm" &gt;ajax database& Lt;/a&gt;


&lt;a title= "PHP and Ajax Responsexml instance" href= "http://www.111cn.net/w3school/php/php_ajax_responsexml.htm" &gt;ajax Responsexml&lt;/a&gt;


&lt;a title= "PHP and Ajax Live Search" href= "http://www.111cn.net/w3school/php/php_ajax_livesearch.htm" &gt;ajax Live Search&lt;/a&gt;


&lt;a title= "PHP and Ajax RSS reader" href= "http://www.111cn.net/w3school/php/php_ajax_rss_reader.htm" &gt;ajax RSS reader& Lt;/a&gt;


&lt;a title= "PHP and Ajax voting" href= "http://www.111cn.net/w3school/php/php_ajax_poll.htm" &gt;ajax poll&lt;/a&gt;





&lt;/div&gt;





&lt;div id= "wentab0_content5" class= "tabcr" style= "Display:none"; &gt;


&lt;a title= "php array function" href= "http://www.111cn.net/w3school/php/php_ref_array.htm" &gt;php array&lt;/a&gt;


&lt;a title= "PHP calendar function" href= "http://www.111cn.net/w3school/php/php_ref_calendar.htm" &gt;php calendar&lt;/a &gt;


&lt;a title= "php date/time function" href= "http://www.111cn.net/w3school/php/php_ref_date.htm" &gt;php date&lt;/a&gt;


&lt;a title= "php directory Function" href= "http://www.111cn.net/w3school/php/php_ref_directory.htm" &gt;php directory&lt;/ A&gt;


&lt;a title= "PHP Error and Logging function" href= "http://www.111cn.net/w3school/php/php_ref_error.htm" &gt;php &gt;


&lt;a title= "PHP filesystem function" href= "http://www.111cn.net/w3school/php/php_ref_filesystem.htm" &gt;php filesystem &lt;/a&gt;


&lt;a title= "PHP filter Function" href= "http://www.111cn.net/w3school/php/php_ref_filter.htm" &gt;php filter&lt;/a&gt;


&lt;a title= "php ftp Function" href= "http://www.111cn.net/w3school/php/php_ref_ftp.htm" &gt;php ftp&lt;/a&gt;


&lt;a title= "php http Function" href= "http://www.111cn.net/w3school/php/php_ref_http.htm" &gt;php http&lt;/a&gt;


&lt;a title= "php libxml function" href= "http://www.111cn.net/w3school/php/php_ref_libxml.htm" &gt;php libxml&lt;/a&gt;


&lt;a title= "PHP mail Function" href= "http://www.111cn.net/w3school/php/php_ref_mail.htm" &gt;php mail&lt;/a&gt;


&lt;a title= "php math function" href= "http://www.111cn.net/w3school/php/php_ref_math.htm" &gt;php math&lt;/a&gt;


&lt;a title= "php mysql function" href= "http://www.111cn.net/w3school/php/php_ref_mysql.htm" &gt;php mysql&lt;/a&gt;


&lt;a title= "php simplexml function" href= "http://www.111cn.net/w3school/php/php_ref_simplexml.htm" &gt;php simplexml&lt;/ A&gt;


&lt;a title= "php string function" href= "http://www.111cn.net/w3school/php/php_ref_string.htm" &gt;php string&lt;/a&gt;


&lt;a title= "PHP XML parser function" href= "http://www.111cn.net/w3school/php/php_ref_xml.htm" &gt;php xml&lt;/a&gt;


&lt;a title= "php zip file function" href= "http://www.111cn.net/w3school/php/php_ref_zip.htm" &gt;php zip&lt;/a&gt;


&lt;a title= "php Miscellaneous Functions" href= "http://www.111cn.net/w3school/php/php_ref_misc.htm" &gt;php Miscellaneous &lt;/a&gt;





&lt;/div&gt;





&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;/div&gt;


&lt;/body&gt;


&lt;/html&gt;

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
web page design code simple web page code web page code example sample web page code sample web page html code basic web page html code html web page design code
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More