|
 |
| |
อยากเขียน tab navigator โดยที่ไม่ต้องใช้ <a> ตรง li เมื่อกด ที่แถบให้เปลี่ยนเป็นอีกสีนึง ตอนนี้ทำได้ คือแค่เอาเม้าชี้และเปลี่ยนแต่พอกดมันกลับเป็นภาพเดิม ผู้รู้ช่วยหน่อย ครับ |
| |
 |
|
|
 |
 |
|
นี่ส่วน html นะ
<div id="i_containTab">
<ul id="navi_containTab">
<li class="tabNavi1"><strong> รายการที่ร้องขอ</strong></li>
<li class="tabNavi2"><strong> รายการที่รอคุณอนุมัติ</strong></li>
</ul>
</div>
ส่วน css
#tabs{background-color:#f5f5f5; border-bottom:solid 1px #dfdfdf;
background:-webkit-gradient(linear,left top,left bottom,from(#f9f9f9),to(#ececec));
background:-moz-linear-gradient(top,#f9f9f9,#ececec);/*#f9f9f9 เทา #ececec*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#ececec');
box-shadow:0 0 2px #dfdfdf;-moz-box-shadow:0 0 2px #dfdfdf;-webkit-box-shadow:0 0 2px #dfdfdf;}
div#i_containTab{
position:relative;
display:block;
width:1001px; /* กำหนดความกว้างทั้งหมด */
border:1px solid #CCC;
}
ul#navi_containTab{
list-style:none;
padding:0;
margin:0;
width:100%;
background-color:#FCF;
}
ul#navi_containTab li{
display:inline;
float:left;
height:30px;
width:200px; /* กำหนดความกว้างทั้งหมด หารด้วยจำนวนเมนูแท็บ */
border:0px solid #CCC;
line-height:25px;
cursor:pointer;
text-align:left;
}
/* class รูปแบบของแต่ละเมนู */
.tabNavi1{
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
}
.tabNavi2{
background:url("right.gif") no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
}
ul#detail_containTab{
list-style:none;
padding:0;
margin:0;
width:100%;
}
ul#detail_containTab li{
float:left;
width:100%;
height:150px;
}
/* class รูปแบบของแต่ละเนื้อหา */
.detailContent1{
background-color:#ffffff;
display:block;
}
.detailContent2{
background-color:#ffffff;
display:none;
}
ul#navi_containTab li:hover {
background:url("right_on.gif") no-repeat right top;
}
ul#navi_containTab li:active {
background:url("right.gif") no-repeat right top;
}
ส่วน jquery
<script type="text/javascript" src="../../css/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("ul#navi_containTab > li").click(function(event){
var menuIndex=$(this).index();
$("ul#detail_containTab > li:visible").hide();
$("ul#detail_containTab > li").eq(menuIndex).show();
});
});
</script>
|
 |
 |
 |
 |
| Date :
2013-02-14 13:21:52 |
By :
sakqqboy |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
| |
|
 Load balance : Server 01
|
