search

Home >Web Front-end >JS Tutorial >jQuery+CSS implements label column switching (code attached)

jQuery+CSS implements label column switching (code attached)

php中世界最好的语言
php中世界最好的语言Original
2018-04-26 09:37:122192browse

This time I will bring you jQuery CSS to implement label column switching (with code). What are the precautions for jQuery CSS to implement label column switching. The following is a practical case, let's take a look.

The running code is as follows

The specific code is as follows

<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>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

jquery implements element drag sorting (with code)

jQuery Ajax implements table data title sorting

The above is the detailed content of jQuery+CSS implements label column switching (code attached). For more information, please follow other related articles on the PHP Chinese website!

php jquery css ajax
Statement：
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
Previous article：jquery implements drag sorting of elements (code attached)Next article：jquery implements drag sorting of elements (code attached)

Related articles

See more