php下載遠程大文件(獲取遠程文件大小)的實例
710
2024-01-10
網頁選項卡可以較好的利用有限的頁面來展示更多的元素，而使用JQuery來制作網頁選項卡也是一件非常簡單的事情。今天就來分享一個網頁選項卡的制作小技巧。
◦引入所需庫
◦選項卡原理
◦業務核心
◦完整小例子
引入所需庫
這個知識點很基礎，但是為了照顧fresh man ,我還是寫一下吧。
選項卡原理
選項卡出現其實只是某一個div獲取到了顯示的權限，其他的沒有顯示而已。
•網頁代碼
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
</div><br><br><br>
<div class="tab_box">
<div>選項卡1:這里是1號內容區域</div>
<div class="hide">選項卡2：這里是2號內容區域</div>
<div class="hide">選項卡3：這里是3號內容區域</div>
</div>
</div>
•添加點樣式元素
<style>
// 使得UL中的li標簽水平排列
ul {
display:inline;
white-space: nowrap;
}
li {
margin:3px;
float:left;
background:red;
// 這樣可以防止li標簽出現換行的顯示
display:inline-block;
}
.tab_menu {
list-style:none; /* 去掉ul前面的符號 */
margin: 0px; /* 與外界元素的距離為0 */
padding: 0px; /* 與內部元素的距離為0 */
width: auto; /* 寬度根據元素內容調整 */
}
.tab_box {
background-color: #465c71; /* 背景色 */
border: 1px #4e667d solid; /* 邊框 */
color: #dde4ec; /* 文字顏色 */
display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */
line-height: 1.35em; /* 行高 */
padding: 4px 20px; /* 內部填充的距離 */
text-decoration: none; /* 不顯示超鏈接下劃線 */
white-space: nowrap; /* 對于文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */
}
.selected {
background-color: green;
display: block;
}
.hide {
display: none;
}
</style>
•JQuery控制
<script>
// 加上鼠標的點擊效果
$(function(){
$("ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
// 加上鼠標懸浮效果
$(function(){
$("div.tab_menu ul li").hover(function(){
$(this).addClass("selected").show();
// 下面的這個可以實現選項卡的聯動效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
},function(){
$(this).removeClass("selected").show();
// 下面的這個可以實現選項卡的聯動效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
</script>
業務核心
里面最關鍵的其實還是最為基礎的JQuery選擇器的使用，然后我們就可以動態的改變頁面上的元素，從而實現我們想要的效果。這也是JQuery的強大之處。
這里比較有技巧性的就是通過對ul li樣式的變換，實現了類似于導航欄的效果。我們可以借鑒到今后的開發之中。這是一個非常實用的小技巧。
// 使得UL中的li標簽水平排列
ul {
display:inline;
white-space: nowrap;
}
li {
margin:3px;
float:left;
background:red;
display:inline-block;
}
完整小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tab Host Demo</title>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/jquery-2.2.4.min.js"></script>
<style>
// 使得UL中的li標簽水平排列
ul {
display:inline;
white-space: nowrap;
}
li {
margin:3px;
float:left;
background:red;
display:inline-block;
}
.tab_menu {
list-style:none; /* 去掉ul前面的符號 */
margin: 0px; /* 與外界元素的距離為0 */
padding: 0px; /* 與內部元素的距離為0 */
width: auto; /* 寬度根據元素內容調整 */
}
.tab_box {
background-color: #465c71; /* 背景色 */
border: 1px #4e667d solid; /* 邊框 */
color: #dde4ec; /* 文字顏色 */
display: block; /* 此元素將顯示為塊級元素，此元素前后會帶有換行符 */
line-height: 1.35em; /* 行高 */
padding: 4px 20px; /* 內部填充的距離 */
text-decoration: none; /* 不顯示超鏈接下劃線 */
white-space: nowrap; /* 對于文本內的空白處，不會換行，文本會在在同一行上繼續，直到遇到 <br> 標簽為止。 */
}
.selected {
background-color: green;
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">選項卡1</li>
<li>選項卡2</li>
<li>選項卡3</li>
</ul>
</div><br><br><br>
<div class="tab_box">
<div>選項卡1:這里是1號內容區域</div>
<div class="hide">選項卡2：這里是2號內容區域</div>
<div class="hide">選項卡3：這里是3號內容區域</div>
</div>
</div>
<script>
// 加上鼠標的點擊效果
$(function(){
$("ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
// 加上鼠標懸浮效果
$(function(){
$("div.tab_menu ul li").hover(function(){
$(this).addClass("selected").show();
// 下面的這個可以實現選項卡的聯動效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
},function(){
$(this).removeClass("selected").show();
// 下面的這個可以實現選項卡的聯動效果
var index = $("ul li").index(this);
$("div.tab_box > div").eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>
實現的效果如下：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持綠夏網。
