13518219792
创新互联是由多位在大型网络公司、广告设计公司的优秀设计人员和策划人员组成的一个具有丰富经验的团队，其中包括网站策划、网页美工、网站程序员、网页设计师、平面广告设计师、网络营销人员及形象策划。承接：做网站、成都网站建设、网站改版、网页设计制作、网站建设与维护、网络推广、数据库开发,以高性价比制作企业网站、行业门户平台等全方位的服务。
先给导航块的a标签设置img属性和data-img属性；img属性为未选中图片，data-img为选中图片。第一个按钮的img图片应设置为默认选中的状态。
//点击每个按钮后进行按钮切换图片操作
$(".tab-bar-item").on("click", function () {
//先const clickImg变量为他的data属性（选中图片） ，然后找到img图片的src属性将未选中的图片点击后替换为选中图片
const clickImg = $(this).data("img");
$(this).find("img").attr("src",clickImg);
//找到被点击标签的其他兄弟标签，用each遍历 const noclick为未选中的img图片，将点击标签的其他兄弟标签的img换为未选中图片就可以了
$(this).siblings().each(function(){
const noclickImg= $(this).attr("img")
$(this).find("img").attr("src",noclickImg);
})
}
1、新建一个html文件，命名为test.html。
2、在test.html文件内，使用div标签创建一行文字，文字内容为“小明”。
3、在test.html文件内，设置div标签的id属性为mytext，主要用于下面通过该id获得div对象。
4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“切换内容”。
5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行func（）函数。
6、在js标签中，创建func()函数，在函数内，通过id(mytext)获得div对象，通过html()方法获得div内的文本内容，使用if语句判断获得的文字内容是否为指定的文本内容，如果不是，则通过html()方法改变文本内容。
$(function() {
//选项卡
$(".order_list ul li").click(function() {
$(this).addClass("on").siblings().removeClass("on"); //切换选中的按钮高亮状态(添加on)
var index = $(this).index(); //获取被按下按钮的索引值，需要注意index是从0开始的
$(".order_xxk div").eq(index).show().siblings().hide(); //在按钮选中时在下面显示相应的内容，同时隐藏不需要的框架内容
});
});
div class='order_list'
ul
li1/li
li2/li
/ul
/div
div class="order_xxk"
div class="yige"1/div
div class="erge"2/div
/div
jQuery中使用attr('属性名')可以返回属性的值。
语法：$(selector).attr([attribute]); // 返回attr中指定的当前选择器的属性值；
例如：
$(selector).attr('id'); // 获取选择器的id
$(selector).attr('class'); // 获取选择器的class类名
实例：
1. 用jQuery获取div的class类名：
1234div class="mystyle"我是div/divscript $('div').attr('class'); // 得到“mystyle”/script
2. 用jQuery获取当前点击的button的id：
123456button id="btn" onclick="BtnClick(this)"按钮/buttonscript function BtnClick(obj){ $(obj).attr('id'); // 得到“btn” }/script
可以采用如下思路：分别将两种背景图片设为两个类，然后使用toggleClass()方法切换类：
$(selector).toggleClass('class_a').toggleClass('class_
创建Html代码：一个简单的div用于显示背景图片
div class="test"/div
设置css样式：分别为两个背景设计一个类
div.test{width:264px;height:152px;margin:50px;border:4px dashed #ccc;}
.bg1{background:url('bg1.png');}
.bg2{background:url('bg2.png');}
编写jquery代码：点击切换类实现背景的变换
$(function(){
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function() {
$(this).toggleClass('bg1').toggleClass('bg2')
1、新建HTML文件。
2、引入jquery.min.js文件。
3、创建HTML内容。
4、预览效果如图。
5、用jquery创建点击事件，点击隐藏按钮，p内容隐藏。
6、用jquery创建点击事件，点击显示按钮，p内容显示。
7、预览如图当点击隐藏按钮，p内容隐藏。
