Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/423.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript jqueryslidedown不是';切换选项卡时不工作_Javascript_Jquery_Html_Css - Fatal编程技术网

Javascript jqueryslidedown不是';切换选项卡时不工作

Javascript jqueryslidedown不是';切换选项卡时不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,当我们停留在一个选项卡上时,一个div会随着细节向下滑动,当我们停留在第二个选项卡上时,第一个div会向上滑动,第二个div会向下滑动。一切都很完美,但当我打开一个新标签,重新访问我的页面时,滑动不顺畅或不起作用 HTML页面 <div id="navbar"> <table id="navbar_link" class="navbar_link_index"> <tr> <td id="about">

当我们停留在一个选项卡上时,一个div会随着细节向下滑动,当我们停留在第二个选项卡上时,第一个div会向上滑动,第二个div会向下滑动。一切都很完美,但当我打开一个新标签,重新访问我的页面时,滑动不顺畅或不起作用

HTML页面

<div id="navbar">
    <table id="navbar_link" class="navbar_link_index">
        <tr>
            <td id="about"><a href="TEMP">TEMP </a></td>
            <td id="services"><a href="TEMP">TEMP</a></td>
            <td id="products"><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
            <td><a href="TEMP">TEMP</a></td>
        </tr>
    </table>
</div>

<div class="nav_details" id="one"><table class="nav_details_table"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
    <p>TEMP</p></td></tr></table></div>

    <div class="nav_details" id="two"><table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
        <p>TEMP</p></td></tr></table></div>

        <div class="nav_details" id="three">
            <table class="nav_details_table servicetbl"><tr><td width="50%"><a href="about.html"><h3>TEMP</h3><p>TEMP<br></p></a></td width="50%"><td><h3>TEMP</h3> 
                <p>TEMP</p></td></tr></table>
            </div>

$(文档).ready(函数(){
var t=null;
$(“#主导航项”)。悬停(函数(){
var=这个;
t=设置超时(函数(){
$('资产净值分项')。向下滑动(200);
t=零;
}, 300);
},函数(){
if(t){
清除超时(t);
t=零;
}
其他的
$('资产净值分项')。幻灯片(200);
});
});
只需关注#主导航项目#子导航项目

复制这些代码并使用您的代码进行修改

$("#one").hover(function()     {$("#one").stop().slideDown().addClass("border_bottom_cls");$("#about").css("background","red");},function(){$("#one").stop().slideUp().removeClass("border_bottom_cls");$("#about").css("background","toggle");});
$("#two").hover(function(){$("#two").stop().slideDown().addClass("border_bottom_cls");$("#services").css("background","red");},function(){$("#two").stop().slideUp().removeClass("border_bottom_cls");$("#services").css("background","toggle");});
$("#three").hover(function(){$("#three").stop().slideDown().addClass("border_bottom_cls");$("#products").css("background","red");},function(){$("#three").stop().slideUp().removeClass("border_bottom_cls");$("#products").css("background","toggle");});
<script>  
  $(document).ready(function (){
    var t = null;
    $('#main-nav-item').hover(function(){
        var that = this;
        t = setTimeout(function(){
            $('#sub-nav-item').slideDown(200);
            t = null;
        }, 300);
    }, function(){
        if (t){
            clearTimeout(t);
            t = null;
        }
        else
            $('#sub-nav-item').slideUp(200);
    });
    });
</script>