有谁能给我做个京东商城右侧的那种选项卡切换的Javascript效果~
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有谁能给我做个京东商城右侧的那种选项卡切换的Javascript效果~相关的知识，希望对你有一定的参考价值。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</title>
<style type="text/css">
*margin:0;padding:0;list-style-type:none;
a,imgborder:0;
bodyfont:12px/180% Arial, Helvetica, sans-serif,"宋体";
acolor:#333;text-decoration:none;
a:hovercolor:#3366cc;text-decoration:underline;
h2font-size:14px;text-align:center;
/* tabbox */
.tabboxwidth:432px;margin:20px auto;position:relative;height:171px;overflow:hidden;
.tabbox .tabbtnheight:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;
.tabbox .tabbtn lifloat:left;position:relative;margin:0 0 0 -1px;
.tabbox .tabbtn li a,.tabbox .tabbtn li spandisplay:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;
.tabbox .tabbtn li.currentborder-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;
.tabbox .tabbtn li.current a,.tabbox .tabbtn li.current spanborder-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;
.tabbox .loadingheight:40px;width:432px;text-align:center;position:absolute;left:0;top:120px;
.tabbox .tabconpadding:10px;border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;
.tabbox .tabcon liheight:24px;line-height:24px;overflow:hidden;
.tabbox .tabcon li spanmargin:0 10px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;
</style>
</head>
<body>
<h2>静态 选项卡 滑过事件</h2>
<div class="tabbox" id="statetab">
<ul class="tabbtn">
<li class="current"><a href="#">jquery 特效</a></li>
<li><a href="#">javascript 特效</a></li>
<li><a href="#">div+css 教程</a></li>
<li><a href="#">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a href="#" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
<li><span>▪</span><a href="#" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><span>▪</span><a href="#" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
<li><span>▪</span><a href="#" title=" javascript滚动图片按钮控制图片左右自动滚动"> javascript滚动图片按钮控制图片左右自动滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
<li><span>▪</span><a href="#" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#" title="用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li>
<li><span>▪</span><a href="#" title="CSS如何定位工程">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><span>▪</span><a href="#" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><span>▪</span><a href="#" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabbox end-->
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
//ajax 选项卡
$('#ajaxtab .tabbtn li a').click(function()
var thiscity = $(this).attr("href");
$("#ajaxtab .loading").ajaxStart(function()
$(this).show();
);
$("#ajaxtab .loading").ajaxStop(function()
$(this).hide();
);
$('#ajaxtab .tabcon').load(thiscity);
$('#ajaxtab .tabbtn li a').parents().removeClass("current");
$(this).parents().addClass("current");
return false;
);
$('#ajaxtab .tabbtn li a').eq(0).trigger("click");
//tab plugins 插件
$(function()
//选项卡鼠标滑过事件
$('#statetab .tabbtn li').mouseover(function()
TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
);
$('#statetab .tabbtn li').eq(0).trigger("mouseover");
//选项卡鼠标滑过事件
$('#clicktab .tabbtn li').click(function()
TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
);
$('#clicktab .tabbtn li').eq(0).trigger("click");
function TabSelect(tab,con,addClass,obj)
var $_self = obj;
var $_nav = $(tab);
$_nav.removeClass(addClass),
$_self.addClass(addClass);
var $_index = $_nav.index($_self);
var $_con = $(con);
$_con.hide(),
$_con.eq($_index).show();
);
</script>
</body>
</html> 参考技术A
详细请看压缩包Demo。
样式和结构是直接复制的，所以看起来应该一样。
样式有部分手工调整。
样式部分可以删减那些属于页面其它元素的内容，这个我没做。
离线版可以离线查看
在线版需联网。
是用心做的，请采纳。
谁能给我解释一下这个 IOCP 图？
【中文标题】谁能给我解释一下这个 IOCP 图？【英文标题】：Can anyone explain to me this IOCP diagram? 【发布时间】：2015-02-23 15:46:34 【问题描述】：在“WinSock Programming Fundamental: A Compilation”一书中，IOCP有这张图：
我了解完成通知到达完成端口，并且四个排队的线程调用GetQueuedCompletionStatus() 以获取完成数据包。但是完成端口下面显示的另外两个工作线程是做什么的，是不是这些线程也调用了GetQueuedCompletionStatus()，但是他们已经收到了一个完成包，现在正在处理它？
【问题讨论】：
我相信是的，是的。 “活动”线程正在处理缓冲区等，而“非活动”线程仍停留在 GetQueuedCompletionStatus() 上，等待某事做，或者由于 IOCP 的一个特性对运行线程的总体上限而被挂起。跨度> 题外话：C++部分的整个首页（50+题）是SSL、IOCP和Sockets..这是什么？地球上的每个人都在同时使用高性能插座吗？哈哈。 :O 看起来很酷。 我刚刚快速浏览了您提到的那本书。就我个人而言，我会得到有关该主题的适当文本，Microsoft Windows 的网络编程仍然是了解它如何工作的最佳选择，即使它有点过时了。了解 IOCP 的运作方式后，您可以使用 MSDN 和在线资源更新您的知识。 【参考方案1】：正如马丁詹姆斯在评论中所说的那样； Queued Threads 和 Worker Threads 都是调用GetQueuedCompletionStatus() 的线程。指定为工作线程的线程已完成处理并正在执行此操作。指定为 Queued Threads 的线程正在等待更多的完成，或者由于创建它的并发值而被 IOCP 阻塞。如果是后者，那么他们将等待其中一个工作线程阻塞 IOCP API 知道的 API。如果一个工作线程完成了对当前完成的处理，那么它将进入非活动线程队列的前面（从而允许 IOCP 提供其 LIFO 功能，使活动线程保持运行，从而有助于减少上下文切换和内存错误）。
【讨论】：
以上是关于有谁能给我做个京东商城右侧的那种选项卡切换的Javascript效果~的主要内容，如果未能解决你的问题，请参考以下文章
有谁能给我【NOIP2015】《跳石头》的暴力代码和二分代码以及其中算法思想的详细解释啊？
谁能帮我用NGUI做个简单的UNITY3D的界面，就是最普通的那种有登陆界面，确认返回，以及切换的3个界面。