您的位置:首页 > Web前端 > JQuery

每日小練習之JQuery選項卡(part2)

2019-04-03 15:17 134 查看

今天來一波簡單的選項卡功能編寫

運用了以下方法:

1:load()方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

2:each()方法规定为每个匹配元素规定运行的函数。

3:removeClass() 方法从被选元素移除一个或多个类。addClass() 方法向被选元素添加一个或多个类。

4:setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

5:mouseover()当鼠标指针位于元素上方时,会发生 mouseover 事件。mouseout()当鼠标指针从元素上移开时,发生 mouseout 事件。

栗子一:鼠標經過和離開的選項卡

css:

[code]* {
margin:0;
padding:0;
list-style: none;
box-sizing:border-box;
}
a {
text-decoration: none;
}
.box_one {
margin-bottom:20px
}
.box_one>ul>li {
float:left;
background:#000000;
padding:5px 10px;
color:red;
border:1px solid #FFF;
cursor:pointer;
}
.box_one>ul>li.on {
background:#FF0000;
color:#000000;
border:1px solid #FF0000;
}
.content_com {
clear:both;
height:100px;
width:300px;
background:#FF0000;
color:#000000;
display:none;
padding:5px 12px;
}
.content_one {
display:block;
}

HTML:

[code]<div class="box_one">
<ul>
<li class="on">菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<div class="content_one content_com">内容1</div>
<div class="content_com">内容2</div>
<div class="content_com">内容3</div>
</div>

JQ:

[code]$(document).ready(function(){
$(".box_one>ul>li").each(function(index){
var liNode = $(this);
$(this).mouseover(function(){
var t;
t = setTimeout(function(){
$("div.content_one").removeClass("content_one");
$(".box_one>ul>li.on").removeClass("on");
$("div.content_com").eq(index).addClass("content_one");
liNode.addClass("on");
},300)
}).mouseout(function(){
clearTimeout(t)
});
});
})

結果:

栗子二:點擊后觸發選項卡

menu.css

[code]* {
margin:0;
padding:0;
list-style: none;
box-sizing:border-box;
}
a {
text-decoration: none;
}
.menu_two>ul>li {
float:left;
border:1px solid blueviolet;
padding:10px 20px;
margin-right:2px;
cursor:pointer;
background:#FFF;
}
.menu_two>ul>li.active {
border:1px solid darkgreen;
color:palevioletred;
position:relative;
z-index:99;
border-bottom:1px solid #FFF;
}
div#menu_content {
width:300px;
height:200px;
border:1px solid #000000;
clear:left;
position:relative;
top:-1px;
overflow:auto;
}

 HTML

[code]<div class="menu_two">
<ul>
<li class="active">one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id="menu_content"></div>
<div class="titjs">
<h4 class="lead">美麗的地方西藏</h4>
<p class="text-justify">西藏旅遊資源豐富,其自然和人文景觀得天獨厚。旅遊業已成為西藏發展戰略之一[7]。2015年西藏累計接待遊客突破2000萬人次,全年旅遊總收入達280億元,占全區生產總值25%以上,對經濟增長的貢獻率超過20%[8]。預計到2020年,西藏年接待遊客將突破3000萬人次,年旅遊總收入突破550億元[9]。但同時,西藏旅遊資源也很脆弱,隨著大量遊客湧入西藏,西藏的民族文化、風俗習慣難免受到影響和衝擊[10]。故現時亦提倡在開發旅遊資源的同時,注意對本地風土習俗的保護[11]。
</p>
</div>

menu.js

[code]$(document).ready(function(){
$("#menu_content").load("css/menu.css");
$(".menu_two>ul>li").each(function(index){
$(this).click(function(){
$(".menu_two>ul>li.active").removeClass("active");
$(this).addClass("active");
if(index==0){
$("#menu_content").load("css/menu.css");
}else if(index==1){
$("#menu_content").load("js/menu.js");
}else if(index==2){
$("#menu_content").load("index.html .titjs")
}
})
})
})

結果為:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: