Web Front-end
HTML Tutorial
How to achieve the sliding door effect with CSS_html/css_WEB-ITnose
How to achieve the sliding door effect with CSS_html/css_WEB-ITnose
Jun 24, 2016 am 11:41 AM
How to implement the sliding door effect with CSS:
The so-called sliding door and tab tab actually mean the same thing. Here is an example of how to implement this function, the code The example is as follows:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <meta name="keywords" content="JS實現(xiàn)的新聞列表tab選項卡效果、JS特效、Jquery特效" /><meta name="description" content="JS實現(xiàn)的新聞列表tab選項卡效果、JS特效、Jquery特效" /><title>JS實現(xiàn)的新聞列表tab選項卡效果-螞蟻部落</title><style type="text/css">* { padding:0; margin:0}img { border:0; display:block;}body { font-size:12px; margin:0px auto; color:black; text-align:center;}.dis{ display:block;}.undis { display:none;}#cntR { width:302px; margin:0 auto;}#NewsTop{ clear:both; margin-bottom:16px;}#NewsTop P { float:left; line-height:21px}#NewsTop P.topTit { font-weight:bold; width:117px;}#NewsTop P.topC0 { background:#dcdcdc; border-left:#f2f2f2 1px solid; width:40px; cursor:pointer}#NewsTop P.topC1 { background:#c2130e; border-left:#f2f2f2 1px solid; width:40px; color:#fff}#NewsTop #NewsTop_tit{ border-bottom:#c2130e 3px solid; height:21px;}#NewsTop #NewsTop_cnt{ padding-left:32px; line-height:26px; padding-top:7px; height:260px; text-align:left;}#NewsTop #NewsTop_cnt a { color:#666; text-decoration:none}#NewsTop #NewsTop_cnt a:hover { color:#c2130e; text-decoration:underline}</style></head><body><div id="cntR"> <div id="NewsTop"> <div id="NewsTop_tit"> <P class="topTit">新聞排行</P> <P class="topC0">國內(nèi)</P> <P class="topC0">國際</P> <P class="topC0">社會</P> <P class="topC0">網(wǎng)評</P> </div> <div id="NewsTop_cnt"> <span title="Don't delete me"></span> <span> <a href="#">新疆阜康鐵路橋梁坍塌多節(jié)運煤車廂側(cè)翻墜河</a><br/> <a href="#">最高法:承諾不判賴昌星死刑沒有超越法律程序</a><br/> <a href="#">物權(quán)法:滿70年住宅建設(shè)用地使用權(quán)將自動續(xù)期</a><br/> <a href="#">弟弟被妻下藥毒死男子買女尸為其配陰婚(圖)</a><br/> <a href="#">揭開鄭州神槍手神秘面紗 頭號狙擊手是近視眼</a><br/> <a href="#">美軍高官:不排除和中國發(fā)生直接軍事對抗可能</a><br/> <a href="#">浙江東陽傳奇富姐吳英涉嫌非法吸收存款被批捕</a><br/> <a href="#">西方炒作"中國航母威脅論"稱05年已正式服役</a><br/> <a href="#">女孩生活無法自理請人大代表遞交安樂死議案</a><br/> <a href="#">建設(shè)部：住房公積金制度將覆蓋農(nóng)民工</a><br/> <div align="right"><a href="#">...more</a></div> </span> <span> <a href="#">美華裔女兵在營房上吊死亡軍方介入調(diào)查(圖)</a><br/> <a href="#">組圖：美國總統(tǒng)布什車隊被撞</a><br/> <a href="#">夢露掌握肯尼迪之弟秘密遭誘騙自殺(組圖)</a><br/> <a href="#">孟加拉國嚴(yán)打貪官人人自危奔馳寶馬拋棄路邊</a><br/> <a href="#">韓國將舉行大規(guī)模軍事演習(xí)(圖文)</a><br/> <a href="#">組圖：土星最大衛(wèi)星表面發(fā)現(xiàn)“海洋”</a><br/> <a href="#">墨西哥緝毒行動繳獲2億美元巨額現(xiàn)鈔(組圖)</a><br/> <a href="#">組圖：全球掀起裸體抗議加拿大捕獵海豹活動</a><br/> <a href="#">美潛艇在百慕大失蹤一晚航母戰(zhàn)群出動搜索</a><br/> <a href="#">匈牙利20萬人示威 政要被民眾扔雞蛋(組圖)</a><br/> <div align="right"><a href="#">...more</a></div> </span> <span> <a href="#">深圳女工被三名男子輪奸男友目睹過程(組圖)</a><br/> <a href="#">男子珍藏一角錢“幣王”價格高達1.3萬(圖)</a><br/> <a href="#">青海女孩被困洗頭房每天接客十幾次(圖)</a><br/> <a href="#">組圖：老妻少夫演繹忘年戀69歲妻子成功除皺</a><br/> <a href="#">陜西藍田縣電視臺播放淫穢影像 達10分鐘左右</a><br/> <a href="#">女子自稱被大學(xué)教授誘騙同居討要分手費(圖)</a><br/> <a href="#">組圖：男女私處成造型“性”趣禮品太出格</a><br/> <a href="#">組圖：四川瀘州16歲女孩打造中國第一丑女</a><br/> <a href="#">最高法:承諾不判賴昌星死刑沒有超越法律程序</a><br/> <a href="#">深圳發(fā)現(xiàn)睪丸被摘男童尸體續(xù)：疑為1月前失蹤</a><br/> <div align="right"><a href="#" target=_self>...more</a></div> </span> <span> <a href="#">養(yǎng)路費征稽員強制扣車致三輪車夫慘死車輪下</a><br/> <a href="#">20多位學(xué)者談中醫(yī)問題 方舟子遭多名專家批駁</a><br/> <a href="#">考研女生自稱揭露監(jiān)考老師作弊 成績被判零分</a><br/> <a href="#">全國政協(xié)委員建議一戶一房制引起網(wǎng)民熱議</a><br/> <a href="#">河南周口市6名警察將人打昏后扔下樓摔死</a><br/> <a href="#">組圖：69歲老妻除皺成功 與少夫開始新生活</a><br/> <a href="#">青海女孩被困洗頭房每天接客十幾次(圖)</a><br/> <a href="#">美上將：解放軍不是美軍對手 導(dǎo)彈打不垮臺灣</a><br/> <a href="#">新疆阜康鐵路橋梁坍塌導(dǎo)致運煤列車脫軌</a><br/> <a href="#">鐵道部回應(yīng)吳敬璉質(zhì)疑:春運不漲價將長期堅持</a><br/> <div align="right"><a href="#">...more</a></div> </span> </div> </div></div><script type="text/javascript"> var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p'); var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span'); var len=Tags.length; var flag=1;//修改默認(rèn)值 for(i=1;i<len;i++){ Tags[i].value = i; Tags[i].onmouseover=function(){ changeNav(this.value) }; TagsCnt[i].className='undis'; } Tags[flag].className='topC1'; TagsCnt[flag].className='dis'; function changeNav(v){ Tags[flag].className='topC0'; TagsCnt[flag].className='undis'; flag=v; Tags[v].className='topC1'; TagsCnt[v].className='dis'; }</script></body></html> The above code implements the most basic sliding door effect, which is also an example on the quoted network. Here is a brief introduction on how to implement this function:
1. Use four p elements in the header to make the navigation title, and use left floating to arrange the four p elements in a row, and set the next three Default CSS properties.
2. In terms of rotation content, several span elements are simply listed and displayed. You may be confused about the reason for the existence of the first span, which will be introduced below.
3. The above is the div css implementation of the code. Now let’s start with the street js to control the code to implement the sliding door:
document.getElementById('NewsTop_tit').getElementsByTagName('p') use To get the p tag collection of the title. document.getElementById('NewsTop_cnt').getElementsByTagName('span') is used to obtain the span element tag collection of the content.
Tags.length is used to get the number of p tags in the p tag set.
flag=1 is used to set a flag, which will be used in the following code.
The for loop statement is used to assign values ??to each p tag and bind event processing functions to them. This time the for loop can extract the role of the first span element, because the first p tag It does not participate in sliding doors, so you must add an empty span tag corresponding to it, otherwise the for loop will cause errors when traversing span elements. The changeNav() event handler can change the background color of the p element of the first tab to gray and the font to black, hide the content span of the first tab, and set the p element and span of the corresponding values ????to the current element. .
4. Tags[flag].className='topC1' and TagsCnt[flag].className='dis' after the for loop can be set. When the page is loaded, the default current p element and span element are both The first one.
The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/511.html
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Explain the purpose of the role attribute in ARIA.
Jun 14, 2025 am 12:35 AM
ARIA's role attribute is used to define the role of web elements and improve accessibility. 1. Role attribute helps assistive technology to understand the functions of elements, such as buttons, navigation, etc. 2. Use role attributes to assign specific roles to non-semantic HTML elements. 3. The role attribute should be consistent with the element behavior and be verified by the accessibility tool test.
HTML and Design: Creating the Visual Layout of Websites
Jun 14, 2025 am 12:39 AM
How to create a website layout? 1. Use HTML tags to define the content structure, such as, ,. 2. Control styles and positions through CSS, using box model, float or Flexbox layout. 3. Optimize performance, reduce HTTP requests, use cache and optimize images, and ensure responsive design.
How can you ensure your HTML code is readable and maintainable?
Jun 10, 2025 am 12:06 AM
Improve the readability and maintainability of HTML code can be achieved through the following steps: 1. Use semantic tags, such as, etc. to make the code structure clear and improve SEO effect; 2. Keep the code formatted and use consistent indentation and spaces; 3. Add appropriate comments to explain the code intention; 4. Avoid excessive nesting and simplify the structure; 5. Use external style sheets and scripts to keep the HTML concise.
How do I stay up-to-date with the latest HTML standards and best practices?
Jun 20, 2025 am 08:33 AM
The key to keep up with HTML standards and best practices is to do it intentionally rather than follow it blindly. First, follow the summary or update logs of official sources such as WHATWG and W3C, understand new tags (such as) and attributes, and use them as references to solve difficult problems; second, subscribe to trusted web development newsletters and blogs, spend 10-15 minutes a week to browse updates, focus on actual use cases rather than just collecting articles; second, use developer tools and linters such as HTMLHint to optimize the code structure through instant feedback; finally, interact with the developer community, share experiences and learn other people's practical skills, so as to continuously improve HTML skills.
How do I use the element to represent the main content of a document?
Jun 19, 2025 pm 11:09 PM
The reason for using tags is to improve the semantic structure and accessibility of web pages, make it easier for screen readers and search engines to understand page content, and allow users to quickly jump to core content. Here are the key points: 1. Each page should contain only one element; 2. It should not include content that is repeated across pages (such as sidebars or footers); 3. It can be used in conjunction with ARIA properties to enhance accessibility. Usually located after and before, it is used to wrap unique page content, such as articles, forms or product details, and should be avoided in, or in; to improve accessibility, aria-labeledby or aria-label can be used to clearly identify parts.
How do I create a basic HTML document?
Jun 19, 2025 pm 11:01 PM
To create a basic HTML document, you first need to understand its basic structure and write code in a standard format. 1. Use the declaration document type at the beginning; 2. Use the tag to wrap the entire content; 3. Include and two main parts in it, which are used to store metadata such as titles, style sheet links, etc., and include user-visible content such as titles, paragraphs, pictures and links; 4. Save the file in .html format and open the viewing effect in the browser; 5. Then you can gradually add more elements to enrich the page content. Follow these steps to quickly build a basic web page.
How do I create checkboxes in HTML using the element?
Jun 19, 2025 pm 11:41 PM
To create an HTML checkbox, use the type attribute to set the element of the checkbox. 1. The basic structure includes id, name and label tags to ensure that clicking text can switch options; 2. Multiple related check boxes should use the same name but different values, and wrap them with fieldset to improve accessibility; 3. Hide native controls when customizing styles and use CSS to design alternative elements while maintaining the complete functions; 4. Ensure availability, pair labels, support keyboard navigation, and avoid relying on only visual prompts. The above steps can help developers correctly implement checkbox components that have both functional and aesthetics.
What is an HTML tag?
Jun 13, 2025 am 12:36 AM
HTMLtagsareessentialforstructuringwebpages.Theydefinecontentandlayoutusinganglebrackets,ofteninpairslikeand,withsomebeingself-closinglike.HTMLtagsarecrucialforcreatingstructured,accessible,andSEO-friendlywebpages.
