滑动切换jQuery,不会影响其他页面元素

时间:2011-01-03 17:24:45

标签: jquery html css

我的页面左侧有一张图片,并且点击后的空白链接将切换打开其他外部链接的容器。当容器打开时,我需要网页的滚动不受影响。提前谢谢。

<!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" />

</head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery.js">
</script>
<style type="text/css">
*, * focus {
    outline: none;
    margin: 0;
    padding: 0;
}

.container {
    width: 500px;
    float:right;
    margin: 0 auto;
}
h1 {
    font: 4em normal Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    padding: 10px 0;
    color: #aaa;
}
h2.trigger {
    padding: 0 0 0 0;
    margin: 0 0 5px 0;

    height: 46px;
    line-height: 46px;
    width: 450px;
    font-size: 2em;
    font-weight: normal;
    float: right;
}
h2.trigger a {
    color: gray;
    text-decoration: none;
    display: block;
    float:right;
}
h2.trigger a:hover {
    color: #ccc;
}
h2.active {background-position: left bottom;}
.toggle_container {
    margin: 0 0 5px;
    padding: 0;
    border-top: 1px solid #d6d6d6;

    overflow: hidden;
    font-size: 1.2em;
    width: 350px;
    clear: both;
    float:right;
}
.toggle_container .block {
    padding: 5px;

}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('#nav li').hover(
function () {
//show its submenu
$('ul', this).slideDown(250);
},
function () {
//hide its submenu
$('ul', this).slideUp(250);

}
);
$(".toggle_container").hide();

    $("h2.trigger").click(function(){
        $(this).toggleClass("active").next().slideToggle("fast");
    });

});
</script>
<h2 class="trigger"><a href="#"> Popular Links</a></h2>
    <div class="toggle_container">
        <div class="block">
            <p>links</p>
            <p>more links</p>
        </div>
    </div>
    </div>

图片在这里,不允许发布代码。

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您不希望浏览器跳转到页面顶部?如果是这样,您可以尝试href="#"

而不是href="javascript:;"