Heim > Artikel > Web-Frontend > jQuery+CSS implementiert die Beschriftungsspaltenumschaltung (mit Code)
jQuery+CSS implementiert die Beschriftungsspaltenumschaltung (mit Code)
- php中世界最好的语言Original
- 2018-04-26 09:37:122130Durchsuche
Dieses Mal bringe ich Ihnen jQuery+CSS, um den Etikettenspaltenwechsel (mit Code) zu realisieren. Hier sind die praktischen Fälle einmal schauen. Der laufende Code lautet wie folgt
Der spezifische Code lautet wie folgt
<html>
<head>
<title>jQuery平滑滚动的标签分栏切换</title>
<meta charset="gb2312">
<style>
ul,li{
margin:0px;
padding:0px;
list-style:none
}
li{
float:left;
background-color:#8c6239;
color:white;
padding:5px;
margin-right:2px;
border:1px solid white;
}
li.myLi{
background-color:#ea5500;
border:1px solid #ea5500;
}
p{
clear:left;
background-color:#ea5500;
color:white;
width:300px;
height:100px;
padding:10px;
display:none;
}
p.myp{
display:block;
}
</style>
<script src="./jquery-1.7.1.min.js"></script>
<script>
var timeId;
$(document).ready(function(){
$("li").each(function(index){
//index是li数组的的索引值
$(this).mouseover(function(){
var liNode = $(this);
//延迟是为了减少服务器压力，防止鼠标快速滑动
timeId = setTimeout(function(){
//将原来显示的p隐藏掉
$("p.myp").removeClass("myp");
//将原来的li的myLi去掉
$("li.myLi").removeClass("myLi");
//显示当前鼠标li的对应的p
$("p").eq(index).addClass("myp");
//增加当前li的myLi
liNode.addClass("myLi");
},300);
}).mouseout(function(){
clearTimeout(timeId);
});
});
});
</script>
</head>
<body>
<ul>
<li class="myLi">this is li 1</li>
<li>this is li 2</li>
<li>this is li 3</li>
</ul>
<p class="myp">this is p1</p>
<p>this is p2</p>
<p>this is p3</p>
</body>
</html>
Ich glaube, Sie haben die Methode nach dem Lesen gemeistert Bitte beachten Sie weitere spannende Artikel auf der chinesischen PHP-Website.
Empfohlene Lektüre:
Jquery implementiert Element-Drag-Sortierung (mit Code)Das obige ist der detaillierte Inhalt vonjQuery+CSS implementiert die Beschriftungsspaltenumschaltung (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery implementiert Drag-Sortierung von Elementen (Code angehängt)Nächster Artikel：jquery implementiert Drag-Sortierung von Elementen (Code angehängt)