利用jquery实现特色格子选项卡



41 161 54



特效描述:利用jquery实现 特色格子 选项卡,利用jquery实现特色格子选项卡

代码结构

1. 引入CSS

<link href="css/global.css" type="text/css" rel="stylesheet" />
<link href="css/page.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/itools_all.js"></script>
<script type="text/javascript" src="js/ie6png.js"></script>

3. HTML代码

<div class="warp_out">
<div class="warp">
<div class="feature_main">
<div id="f_main_nav" class="f_main_nav">
<ul class="clearfix">
    <li class="fm1">
    <p class="fm_info">拖动mp3音乐即可自动转换铃声。</p>
    <span>&nbsp;</span></li>
    <li class="fm2">
    <p class="fm_info">桌面管理,帮你的程序归类。</p>
    <span>&nbsp;</span></li>
    <li class="fm3">
    <p class="fm_info">关联ipa,双击安装。</p>
    <span>&nbsp;</span></li>
    <li class="fm4">
    <p class="fm_info">Plist编辑器</p>
    <span>&nbsp;</span></li>
    <li class="fm5">
    <p class="fm_info">短信,联系人,可编辑。</p>
    <span>&nbsp;</span></li>
    <li class="fm6">
    <p class="fm_info">定制app标签</p>
    <span>&nbsp;</span></li>
    <li class="fm7">
    <p class="fm_info">清理垃圾。</p>
    <span>&nbsp;</span></li>
    <li class="fm8">
    <p class="fm_info">不同设备间资料共享</p>
    <span>&nbsp;</span></li>
</ul>
</div>
<div id="f_main_con" class="f_main_con">
<ul>
    <li class="fmc1"><a class="dc_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>拖动mp3音乐,即可自动转换成m4r格式。</strong>
    <p>还苦恼每次添加铃声的时候怎么转换成苹果特有的m4r格式吗?无需安装解码软件,轻轻将喜欢的音乐拖曳到iTools的设备铃声栏中,即可自动将其转换成m4r格式。还可以随意截取自己喜欢的片段,作为手机铃声。</p>
    </div>
    </li>
    <li class="fmc2"><a class="dr_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>桌面管理,帮你的程序归类。</strong>
    <p>下载了好多应用程序,看得眼花缭乱?iTools桌面管理的智能分类让你不再头痛,选好类别,自动帮你将相应程序归好类。</p>
    </div>
    </li>
    <li class="fmc3"><a class="de_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>关联ipa,双击安装。</strong>
    <p>关联ipa,在各大网站点击iTools的ipa一键安装按钮,或者直接在电脑中双击ipa文件就能将其安装到您的设备。</p>
    </div>
    </li>
    <li class="fmc4"><a class="df_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>Plist编辑器</strong>
    <p>专为中高级用户打造,对于需要修改的plist文件,无需再下载相关软件,直接打开iTools的plist文件即可编辑。</p>
    </div>
    </li>
    <li class="fmc5"><a class="dx_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>短信,联系人,可编辑。</strong>
    <p>短信内容,联系人信息,随意编辑,一键保存。</p>
    </div>
    </li>
    <li class="fmc7"><a class="app_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>定制app标签。</strong>
    <p>多人共用一台电脑,本地程序很多很杂怎么一键管理?iTools程序库里面的定制app标签功能,让你一键管理属于你的全部APP。</p>
    </div>
    </li>
    <li class="fmc6"><a class="clear_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>清理垃圾。</strong>
    <p>iTools首创的清理垃圾功能,让你的苹果设备更轻巧,运行更无负担!</p>
    </div>
    </li>
    <li class="fmc8"><a class="share_close" title="关闭" href="javascript:void(0);">关闭</a>
    <div class="fmc_info"><strong>不同设备间资料共享。</strong>
    <p>多台设备同时连接到电脑上,即可将软件同时安装到不同的设备上,最高可连接20台设备。如果你是手机销售商,这样的设计,一定让你的效率大大提高。</p>
    </div>
    </li>
</ul>
</div>
</div>
</div>
</div>
<!--warp end-->
<div style="text-align:center;clear:both"><br>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴 文字切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到