jQuery 关于刷新后tab的切换问题

这个页面里面有三个tab，在第二个tab里面有select选择后会默认刷新页面，怎么写才能将页面默认到第二个tab里。好忧伤。$(document).ready(function() {
$('#tabs').tabs();
$("select").change(function() {
var $tabs = $('#tabs').tabs(); var selected = $tabs.tabs('option', 'selected');

$("form[name='form_query']").submit();

$tabs.tabs('select', selected); //  切换到选中选项卡标签 });
});

解决方案 »

  1.   

    点击tab后还刷新页面干嘛? 这样子tab的存在就没意义了
      

  2.   

    可以把每个tab里面的内容分别写在不同的页面, selected事件时,加载对应的页面的url到tab
      

  3.   

    你用的是哪个UI？你看下文档或者demo，看下有没有active这个配置项。
      

  4.   


    在第二个tab里面有俩个select，选择第一个省select后刷新，在第二个里面出现可以选择的城市。
    但是现在刷新后就跳转到第一个tab里面。
      

  5.   


    <script language="JavaScript" src="../resource/js/jquery-1.3.2.min.js"></script>
    <script language="JavaScript" src="../resource/js/jquery.form.js"></script>
    <script language="JavaScript" src="../../resource/js/jquery-ui-1.7.2.custom.min.js"></script>
    <script language="JavaScript" src="../resource/js/My97DatePicker/WdatePicker.js"></script>
    <script language="JavaScript" src="../resource/js/common.js"></script>应该有的，怎么设置？
      

  6.   

    试下下面这样
    $('#tabs').tabs({
      active:1
    });
      

  7.   


    <scripttype="text/javascript"> 
    $(function(){ 
    $("#selectId").click(function(event){ 
    return false; 
    }); 
    }); 
    <script> 
      

  8.   

    这个联动的select没有必要刷新页面,你用异步啊,你这个select是神马控件?? 常见的js的选择控件,可以通过赋url或href值异步获取数据的, 你在网上搜一下你这个select控件的 级联选择
      

  9.   

    饶了我吧，不会用ajax异步，，，，我只要简单的js，难道把整体程序全部改一下
      

  10.   

    tab底下放不同的div    点击不同的tab显示对应的div
      

  11.   

    跪了 就是简单想要刷新后仍然在那个tab
      

  12.   

    刷新后仍然在那个tab 就要找地方存放数据，当前比较理想的做法是修改url,直接加上"#!"　+tab编号
    随便从网上找了个tab的例子改给你。
    <!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>Tab标签切换</title> 
    </head> 
    <style> 
    body{ background:#fff;} 
    *{ margin:0; padding:0;} 
    .box{ margin:20px; } 
    .container{background:#FFF; width:500px; clear:both; margin-top:1px; _margin-top:-1px;} 
    .sub-con{height:300px; width:500px;border:1px solid #3CF; background:#FFF; display:none;} 
    .cur-sub-con{ display:block;} 
    .sub-con a{ line-height:40px} 
    .sub-con p{ text-align:center} 
    .nav{ width:370px; height:28px; margin-left:10px;} 
    .nav ul{width:370px; height:28px;} 
    .nav ul li{ list-style:none; display:inline-block;width:60px; height:28px;line-height:28px; text-align:center;margin-left:-9px;*float:left;*margin-left:-1px;} 
    .nav ul li a{ background:#fff;border:1px solid #3CF; text-decoration:none; color:#000; height:28px;display:block;} 
    .nav ul li a:hover{ background:#CCEDFB} 
    .nav ul li a.cur{ z-index:9999;border-bottom:1px solid #FFF; color:#F00;} 
    </style> 
    <body> 
    <div class="box"> 
    <div class="nav"> 
    <ul> 
    <li><a href="#!tab1" class="cur">Tab项1</a></li> 
    <li><a href="#!tab2">Tab项2</a></li> 
    <li><a href="#!tab3">Tab项3</a></li> 
    <li><a href="#!tab4">Tab项4</a></li> 
    </ul> 
    </div> 
    <div class="container"> 
    <div class="sub-con cur-sub-con"> <a href="#" title="这是容器1">这是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div> 
    <div class="sub-con"> <a href="#" title="这是容器2">这是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div> 
    <div class="sub-con"> <a href="#" title="这是容器3">这是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div> 
    <div class="sub-con"> <a href="#" title="这是容器4">这是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div> 
    </div> 
    </div> 
    </body> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
    var intervalID; 
    var curLi; 
    //**********************************
    //屏蔽mouseover事件，只要点击事件
    //**********************************
    /*
    $(".nav li a").mouseover(function(){ 
    curLi=$(this); 
    intervalID=setInterval(onMouseOver,250);//鼠标移入的时候有一定的延时才会切换到所在项，防止用户不经意的操作 
    }); 
    function onMouseOver(){ 
    $(".cur-sub-con").removeClass("cur-sub-con"); 
    $(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
    $(".cur").removeClass("cur"); 
    curLi.addClass("cur"); 
    } 
    $(".nav li a").mouseout(function(){ 
    clearInterval(intervalID); 
    }); 
    *///**********************************
    //处理url，重现上一次点击
    //**********************************
    var urlParser = window.location.href.split("#");
    if(urlParser.length>1 && (curLi=$("a[href='#"+urlParser[1]+"']")).length>0){
    $(".cur-sub-con").removeClass("cur-sub-con"); 
    $(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
    $(".cur").removeClass("cur"); 
    curLi.addClass("cur"); 
    }
    $(".nav li a").click(function(){//鼠标点击也可以切换 
    curLi=$(this);
    clearInterval(intervalID); 
    $(".cur-sub-con").removeClass("cur-sub-con"); 
    $(".sub-con").eq($(".nav li a").index(curLi)).addClass("cur-sub-con"); 
    $(".cur").removeClass("cur"); 
    curLi.addClass("cur"); 
    }); }); 
    </script> 
    </html> 
      

  13.   

    $("form[name='form_query']").submit(function( event ) {
    event.preventDefault();
    });