怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 344 JQUERY DREAMWEAVER
通过CSS和jquery实现点击切换两种不同布局列表
来源：互联网
2023-03-16 23:54:01 469
在做网页的过程中，有时候会需要像淘宝的商品列表页那样，让用户自己选择显示的样式：图片布局和列表布局。下面就一步步来分享一下，我是如何通过CSS和jquery实现点击切换两种不同布局列表的代码和思路。
工具/原料
- 微软10
- Windows10
- Adobe Dreamweaver2020
方法/步骤
1. 写好我们要调整布局样式的这部分页面结构。
a id="check" href="###" class="check-1">切换布局/a>
!-- 注意这里定义了一个带图标的样式：check-1 ，我们还要在样式表里写它的样式 -->
div id="clickChange" class="img-list"> !-- 注意这里要先定义一个class -->
ul>
li>a href="#">我是一个小朋友/a>/li>
li>a href="#">我是一个小朋友/a>/li>
li>a href="#">我是一个小朋友/a>/li>
li>a href="#">我是一个小朋友/a>/li>
li>a href="#">我是一个小朋友/a>/li>
/ul>
/div>
2. 为两种布局写两个不一样的css样式。
假设，第一种样式定义为 img-list，第二种样式定义为 list。这时候，我们需要在样式表中，先写其中一种样式。比如：
/* 先定义一种样式 */
.img-list ul li{
width: 200px;
height: 200px;
background: #ff0;
display: block;
float: left;
margin: 10px;
}
写好第一种样式后，我们利用css的元素继承方法，写第二种样式。
/* 定义另一种样式 */
.list ul li{
width: 400px;
height: 100px;
background: #f00;
display: block;
float: left;
margin: 10px;
}
这时候，我们就有了两套样式。
写更复杂的样式在这里意义不大，大家能看出区别就好。>
我们需要要给那个切换图标写两个样式：
style>
.check-1,.check-2{
width:16px;
height:16px;
background:(check1.gif) center center no-repeat ;
}
.check-2{
background:(check2.gif) center center no-repeat ;
}
/style>
这里写的比较简单暴力，做两个不一样的图标做背景。
3. 使用jquery来完成点击切换。
我们知道，jQuery可以对样式表的类进行操作：类样式函数
addClass() 为元素添加类样式
removeClass() 将元素的类样式移除
toggleClass() 样式的切换；有->无，无->有。
在这里，我们就使用toggleClass() 函数。
script>
$("#check").click(function(){
// 定义 id为 check 的a标签的click事件，鼠标点击这个a标签执行这段程序。
$("#clickChange").toggleClass("list");
// 查找 id为 clickChange的容器，给它增加一个新的class：list。我们原来在页面结构代码里写的 class="img-list"，会变成： class="img-list list"，这时，我们就完成了对页面布局样式的覆盖。
$(".check-1").toggleClass("check-2");
// 查找到类名为 check-1的容器，这里是将鼠标点击的a标签class在 “check-1”和“check-2”之间切换。
});
/script>
到此时，我们就完成了全部代码，可以测试了。
----------------重要提醒：
别忘了在head>/head>之间，引用jQuery文件，路径自己修改。
script type="text/javascript" src="jQuery.js">/script>
---------------
4.全部代码如下：
style>
/* 先定义一种样式 */
.img-list ul li{
width: 200px;
height: 200px;
background: #ff0;
display: block;
float: left;
margin: 10px;
}
/* 定义另一种样式 */
.list ul li{
width: 400px;
height: 100px;
background: #f00;
display: block;
float: left;
margin: 10px;
}
.check-1,.check-2{
width:16px;
height:16px;
background:(check1.gif) center center no-repeat ;
}
.check-2{
background:(check2.gif) center center no-repeat ;
}
/style>
script>
$("#check").click(function(){
$("#clickChange").toggleClass("list");
$(".check-1").toggleClass("check-2");
});
/script>
5.代码运行效果如图：
TIPs
toggleClass()函数有个小技巧：
当我们使用id名进行查找后，将函数值赋值为“a”时，，在每次点击时，它会在" " 和 ”a”之间进行切换。
当我们使用class类名（如“b”）查找后，将函数值赋值为“a”时，在每次点击时，它就会将我们查找的“a”和“b”之间来回切换。
扩展学习一下：感兴趣的朋友可以将下面代码复制到 body>/body>之间，运行测试一下看看效果。有助于对上述三个函数的理解。
style>
div{
width: 200px;
height: 200px;
background-color: #f00;
font-size: 14px;
text-align: center;
}
.a{
background:#9FB3F3;
border-radius: 50%;
}
.b{
border: 2px dashed #9F2527;
opacity: 0.6;
}
.c{
background: #f00;
color: #fff;
}
/style>
button id="btn1">给div增加a，b两个样式/button>
button id="btn2">取消透明度b样式/button>
button id="btn3">样式切换/button>
hr>
div>这是个div容器/div>
h1>建党100周年啦！/h1>
script>
$("#btn1").click(function(){
$("div").addClass("a b");
});
$("#btn2").click(function(){
$("div").removeClass("b");
});
$("#btn3").click(function(){
$("h1").toggleClass("c");
});
/script>
注意事项
- 需要对HTML，CSS，JS或JQuery有一定的了解。
- 电脑需要安装至少一款可以编辑网页代码的编辑器，如DW或Notepad。
- 可以使用浏览器测试你的页面，并通过F12打开控制台分析结果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：jquery如何控制内容的显示和隐藏 下一篇：Ajax如何实现同步和异步
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 335 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 378 JQUERY