css中before和after的應用實例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>before和after</title>
<style>
*{margin:0;padding:0;}
ul{width:100%;overflow: hidden;margin-top:50px;}
ul li {float:left;list-style:none;height:auto;width:200px;border:1px solid #f00;position:relative;height:50px;}
ul li h3{font-size:20px;text-align:center;}
ul li h3:before{
content: ‘‘;
display: block;
position: absolute;
width: 100%;
height: 10px;
background: #224089;
left: 0;
bottom: 6px;
margin-left: -2px;
}
ul li h3:after{
content: ‘‘;
display: block;
position: absolute;
width: 22px;
height: 22px;
bottom: 6px;
margin-bottom: -5px;
left: 50%;
margin-left: -5px;
background: #8D171F;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background-size: 10px 10px;
}
#content p{display: none;}
</style>
</head>
<body>
<ul id="title">
<li style="color:red;font-size:20px;font-weight:bold;" onclick="change(0)"><h3>這是li裏的h3的內容</h3></li>
<li onclick="change(1)"><h3>這是li裏的h3的內容</h3></li>
<li onclick="change(2)"><h3>這是li裏的h3的內容</h3></li>
<li onclick="change(3)"><h3>這是li裏的h3的內容</h3></li>
</ul>
<ul id="content">
<p style="display:block;">第一個</p>
<p>第二個</p>
<p>第三個</p>
<p>第四個</p>
</ul>
<script src="js/jquery.min.js"></script>
<script>
function change(num){
var titles=document.getElementById(‘title‘).getElementsByTagName(‘li‘);
var h3obj=document.getElementById(‘title‘).getElementsByTagName(‘h3‘);
var conts=document.getElementById(‘content‘).getElementsByTagName(‘p‘);
//判斷當前點擊的哪一個h3
for(var i=0;i<titles.length;i++){
if(i==num){
conts[num].style.display = ‘block‘;
titles[num].style.color = ‘red‘;
titles[num].style.fontSize = ‘30px‘;
titles[num].style.fontWeight = ‘bold‘;
// $(‘.time:after‘).css({‘content‘:‘aaa‘,‘color‘:‘#fff‘,‘background‘:‘#000‘})
}else{
conts[i].style.display=‘none‘;
titles[i].style.color = ‘#000‘;
titles[i].style.fontSize = ‘20px‘;
titles[i].style.fontWeight = ‘none‘;
}
}
}
</script>
</body>
</html>
css中before和after的應用實例