本文实例讲述了jQuery简单tab切换效果实现方法。分享给大家供大家参考。具体如下： <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $(.tabtitle li).click(function () { var index = $(this).index(); $(this).attr(class,"tabhover").siblings(li).attr(class,taba); $(.tabcontent).eq(index).show(200).siblings(.tabcontent).hide(); });v...
今天突然心血来潮，想到一个很简单的方法即可达到的tab效果 其实逻辑很简单，但看到网上基本上没这样写的 不知道实际应用中是否会有问题呢，请大侠指教代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery简易选项卡</title> <style> *{ margin:0; padding:0;} body, ul, li { margin:0; padding:0; } body { font:12px/1.5 Tahoma; } #outer { width:450px; ...
大致效果如图下面是代码：自己导入jQuery包。 样式：<style type="text/css"> body,ul,li,div,a{margin:0px;padding:0px;} body{margin-top:10px;margin-left:15px;} #all{border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;width:255px;} #title li{float:left;list-style:none;width:50px;border-top:2px solid #f60;border-right:1px solid #ccc;text-align:center; padding-top:3px;}...
jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写： HTML代码： 代码如下:<div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3> </div> <div id="tab-content"> <ul><li>1234567890-1</li></ul> <ul class="hide"><li>1234567890-2</li></ul> <ul class="hide"><li>1234567890-3</li></ul> </div> </div> css代码： 代...
在网上找了很多jquery效果，都是这样的，于是自己写了一个。防止页面刷新的tab切换， html代码: 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="../Style/admin.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="System/...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script src="http://demo.jb51.net/jslib/jquery/jquery.js" type="text/javascript"></script> <style> <!-- body { margin: 10px auto; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; } .accordion { width: 480px; border-bottom: solid 1px...
html代码: 代码如下:<div class="details"> <ul class="tab"><li class="on" rel="a1"><b>个人资料</b></li><li rel="a2"><b>帐号维护</b></li><li rel="a3"><b>在来个</b></li><li></li></ul> <dl id="a1">11111111111111111111111111111111 </dl> <dl id="a2" style="display:none"> 22222222222222222222222222222222222 </dl> <dl id="a3" style="display:none">3333333333333333333333333333333333333 </dl> </div> js代码:...