收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > extjs > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

一個tab標簽切換效果代碼

HTML:

<div class="tab">
<div id="tabsK">
<ul id="menu4">
<li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a></li>
<li onclick="settab(4,1)"><a title="企業新聞"><span>企業新聞</span></a></li>
<li onclick="settab(4,2)"><a title="行業新聞"><span>行業新聞</span></a></li>
<li onclick="settab(4,3)"><a title="專欄文章"><span>專欄文章</span></a></li>
<li onclick="settab(4,4)"><a title="科技新聞"><span>科技新聞</span></a></li>
</ul>
</div>

<div class="tab2" id="main4">
<ul class="block"></ul>
<ul ></ul>
<ul ></ul>
<ul ></ul>
<ul ></ul>
</div>
</div>

CSS:

#tabsK {
float:left;
width:100%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 10px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
cursor:pointer;
}
#tabsK a {
float:left;
background:url("image/tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url("image/tabrightK.gif") no-repeat right top;
padding:8px 16px 4px 6px;
color:#FFF;
}

#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
cursor:pointer;
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
cursor:pointer;
}
#tabsK .hover a
{
background-position:0% -42px;
}
#tabsK .hover span
{
background-position:100% -42px;
}

.tab2 ul
{
display:none;
list-style-type:none;
height:560px;
}
.tab2 ul li
{
text-align:left;
line-height:20px;
text-indent:1em;
}
.tab2 .block
{
display:block;
}

JS:

<script language="javascript"><!--
function settab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
// --></script>

截圖和用到的兩張圖片:

查看圖片

查看圖片

查看圖片

Extjs Ajax 亂碼問題解決方案
在一次頁面瀏覽過程中,客戶端對一個URL發起瀏覽請求,服務端針對這次請求進行解析,而在字符編碼解析方面,首先他檢查該頁面中的字符編碼設置

ExtJS 2.0實用簡明教程 之Border區域布局
該布局把容器分成東南西北中五個區域,分別由east,south,west,north,cente來表示,在往容器中添加子元素的時候,我們只需要指定這些子元素所在的位置

ExtJS 2.0實用簡明教程 之Ext類庫簡介
ExtJS的類庫由以下幾部分組成:底層API(core):底層API中提供了對DOM操作、查詢的封裝、事件處理、DOM查詢器等基礎的功能。其它控件都是建立在這些底層

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
捕鱼大师辅助软件 浙江体彩20选5预测专家 pc28加拿大在线预测99 天津快乐十分中奖规则详细 理财平台排名 黑龙江快乐十分奖金表 dota2博彩 股票可以买大盘吗 最新22选5开奖 腾讯分分彩1001腾讯分分彩 六合历史开奖记录 中天科技股票分析 佳永配资秒出金 北京11选5开奖历史 分分彩怎么刷赚钱 上海时时乐值走势图 吉林快三走势图预测