这个代码怎么写的？？代码效果如图，图上有代码效果的网址。动态 最新 推荐 公告 、、、点击后不会进入动态而是切换页面。这个代码怎么写？？求大神
2 回答
动漫人物
TA贡献1815条经验 获得超10个赞
有两种方法
一种是，四个页面的内容一次加载完毕
上面四个链接实际是用来调用javascript来显示不同的div，既下面的列表部分
另一种方法是用ifram,下面部分为一个ifram，上面的<a>标签设置target属性为ifram的id
下面的页面则为另外的页面
芜湖不芜
TA贡献1796条经验 获得超7个赞
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery tab选项卡插件</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:#666;} ul,li{ list-style:none;} .tab{ width:450px; margin:0 auto 50px;} .tab-hd { background:#F93; overflow:hidden; zoom:1;} .tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;} .tab-hd li.active{ background:#F60;} .tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}</style></head><body> <script type="text/javascript"> $(function () { function tabs(tabTit, on, tabCon) { $(tabCon).each(function () { $(this).children().eq(0).show(); }); $(tabTit).each(function () { $(this).children().eq(0).addClass(on); }); $(tabTit).children().hover(function () {//鼠标“hover”的效果 $(this).addClass(on).siblings().removeClass(on); var index = $(tabTit).children().index(this); $(tabCon).children().eq(index).show().siblings().hide(); }); } tabs(".tab-hd", "active", ".tab-bd"); tabs(".tab-hd3", "active", ".tab-bd3"); }); </script> <script type="text/javascript"> $(function () { function tabs(tabTit, on, tabCon) { $(tabCon).each(function () { $(this).children().eq(0).show(); }); $(tabTit).each(function () { $(this).children().eq(0).addClass(on); }); $(tabTit).children().click(function () {//鼠标“click”的效果 $(this).addClass(on).siblings().removeClass(on); var index = $(tabTit).children().index(this); $(tabCon).children().eq(index).show().siblings().hide(); }); } tabs(".tab-hd2", "active", ".tab-bd2"); }); </script> <div class="tab"> <ul class="tab-hd"> <li>选项1</li><li>选项2</li><li>选项3</li></ul> <ul class="tab-bd"> <li>内容1</li><li>内容2</li><li>内容3</li></ul> </div> <style type="text/css"> .tab3{ width:450px; margin:0 auto 50px;} .tab-hd3 { background:#F93; overflow:hidden; zoom:1;} .tab-hd3 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;} .tab-hd3 li.active{ background:#F60;} .tab-bd3 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}</style> <div class="tab3"> <ul class="tab-hd3"> <li>选项4</li><li>选项5</li><li>选项6</li></ul> <ul class="tab-bd3"> <li>内容4</li><li>内容5</li><li>内容6</li></ul> </div> <style> .tab2{ width:450px; margin:0 auto 50px;} .tab-hd2 { background:#F93; overflow:hidden; zoom:1;} .tab-hd2 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;} .tab-hd2 li.active{ background:#F60;} .tab-bd2 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;} </style> <div class="tab2"> <ul class="tab-hd2"> <li>点击效果1</li><li>选项2</li><li>选项3</li></ul> <ul class="tab-bd2"> <li>内容1</li><li>内容2</li><li>内容3</li></ul> </div> <hr /> <h1> Tab选项卡标签，自动切换 </h1><style type="text/css"> *{margin: 0;padding: 0;} .dl_all{margin: 10px auto;width: 500px;line-height: 24px; border-left: 1px solid #dcdcdc; } .dt_nav{padding: 0 10px;float: left;border: 1px solid #dcdcdc;border-left: 0;cursor: pointer;margin-bottom: -1px;} .dt_nav.active{border-bottom: 1px solid #fff;} .navcon{clear: both;width: 100%;border-left: 0;border: 1px solid #dcdcdc;border-left: 0;display: none;} </style><script type="text/javascript"> $(document).ready(function () { $('.nav:first').addClass('active'); $('.navcon:first').css('display', 'block'); autoroll(); hookThumb(); }); var i = -1; //第i+1个tab开始 var offset = 3000; //轮换时间 var timer = null; function autoroll() { n = $('.dt_nav').length - 1; i++; if (i > n) { i = 0; } slide(i); timer = window.setTimeout(autoroll, offset); } function slide(i) { $('.dt_nav').eq(i).addClass('active').siblings().removeClass('active'); $('.navcon').eq(i).css('display', 'block').siblings('.navcon').css('display', 'none'); } function hookThumb() { $('.dt_nav').hover(function () {//鼠标事件，可换成“click” if (timer) { clearTimeout(timer); i = $(this).prevAll().length; slide(i); } }, function () { timer = window.setTimeout(autoroll, offset); this.blur(); return false; }); }</script><dl class="dl_all"> <dt class="dt_nav"> nav1 </dt> <dt class="dt_nav"> nav2 </dt> <dt class="dt_nav"> nav3 </dt> <dd class="navcon"> 内容1 </dd> <dd class="navcon"> 内容2 </dd> <dd class="navcon"> 内容3 </dd> </dl></body></html> |
如上代码
添加回答
举报
0/150
提交
取消