HTML 列表切换

最新推荐文章于 2022-11-14 22:16:24 发布

原创最新推荐文章于 2022-11-14 22:16:24 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #html #javascript

HTML 同时被 2 个专栏收录

6 篇文章

订阅专栏

javascript/jquery/ajax

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的列表样式切换功能。通过点击不同的按钮，可以切换列表项的显示样式。此功能适用于网站导航菜单或其他需要动态变化列表样式的场景。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>列表切换</title>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="ListStyle/jquery-2.1.1.min.js" type="text/jscript"></script>
<script src="app.js"></script>
</head>

<body>
   <div class="box">
        <div class="list-box">
            <ul class="list">
                <li class="list-1" id="list-1" style="background-position:0px -26px;"></li>
                <li class="list-2" id="list-2" style="background-position:-30px -26px;"></li>
            </ul>
        </div>
        
        <div>
            <ul class="changlist">
                <div class="lesson-info">
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                    <li class="list-1-o">
                       <img src="ListStyle/lesson.png" width="185" alt="">
                        <span>环境搭建</span>  
                    </li>
                  
                </div>
            </ul>
        </div>
        
        
   </div>
   
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0;}

.box{
	width:789px;
	height:auto;
	margin:0 auto;
}
.list-box{
	margin:0 auto;
	width:700px;
	height:42px;
	border-bottom:1px solid #eeeeee;
}
.list{
  float:right;
  padding-top:10px;
}
.list-box ul li{
  cursor: pointer;/**改变鼠标形态*/
  width:30px;
  height:26px;
  float:left;
  display:block;
  background:url(listype-icon.png) no-repeat;
}

.changlist .list-1-o{
   list-style:none;
   width:185px;
   height:185px;
   border:1px solid #aaa;
   float:left;
   margin-left:20px;
   margin-bottom:20px;
}

.changlist .list-1-v{
   height:69px;
}

// JavaScript Document
$(document).ready(function() {
    $(".list-1").bind("click",function(){
	   $(".list-1").css("backgroundPosition","0px -26px");	
	   $(".list-2").css("backgroundPosition","-30px -26px");
	   
	   $(".changlist").children().removeClass("list-1-o").addClass("list-2-v");
	   
	});
	
	$(".list-2").bind("click",function(){
	   $(".list-1").css("backgroundPosition","0px 0px");	
	   $(".list-2").css("backgroundPosition","-30px 0px");
	   $(".changlist").children().removeClass("list-2-v").addClass("list-1-o");
	});
});