Home > Web Front-end > HTML Tutorial > A CSS HTML accordion pagination problem_html/css_WEB-ITnose

A CSS HTML accordion pagination problem_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:23:55
Original
1124 people have browsed it

How can I make this accordion effect have a default opening page?
I want to open Popular Post by default

#accordion {		margin:0;		padding:0;			list-style:none;	    }			#accordion li {			width: 485px;		}			#accordion li a {			display: block;			width: 485px;			height: 43px;				text-indent:-999em;			outline:none;		}				/* Using CSS Sprite for menu item */		#accordion li a.popular {			background:url(images/body.jpg) no-repeat 0 0;			}		#accordion li a.popular:hover, .popularOver {			background:url(images/body.jpg) no-repeat -268px 0 !important;			}				#accordion li a.category {			background:url(images/body.jpg) no-repeat 0 -43px;			}		#accordion li a.category:hover, .categoryOver {			background:url(images/body.jpg) no-repeat -268px -43px !important;			}				#accordion li a.comment {			background:url(images/body.jpg) no-repeat 0 -86px;			}		#accordion li a.comment:hover, .commentOver {			background:url(images/body.jpg) no-repeat -268px -86px !important;			}						/* Second Level UL List*/		#accordion ul {			background: rgb(53, 3, 7) repeat-y 0 0;			width:485px;			margin:0;			padding:0;			display:none;			}				#accordion ul li {				height:30px;			}						/* styling of submenu item */		#accordion ul li a {				width: 485px;				height:25px;				margin-left:15px;				padding-top:5px;				border-bottom: 1px dotted #777;				text-indent:0;				color:#ccc;				text-decoration:none;			}			/* remove border bottom of the last item */		#accordion ul li a.last {				border-bottom: none;			}		
Copy after login


<div><ul id="accordion" >	<li>		<a href="#" class="item popular" rel="popular">Popular Post</a>		<ul>		三国故事		</ul>	</li>	<li>		<a href="#" class="item category" rel="category">Category</a>		<ul>			<li><a href="#">Category 1</a></li>			<li><a href="#">Category 2</a></li>			<li><a href="#" class="last">Category 3</a></li>		</ul>	</li>	<li>		<a href="#" class="item comment" rel="comment">Recent Comment</a>		<ul>			<li><a href="#">Comment 1</a></li>			<li><a href="#">Comment 2</a></li>			<li><a href="#" class="last">Comment 3</a></li>		</ul>	</li></ul></div>
Copy after login


Reply to discussion (solution)

Why not people. . .

Does anyone want to reply separately?


    The Story of the Three Kingdoms

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template