0

我正在使用 CSS 和 jQuery 的组合在浏览器的右侧创建一组选项卡，它的工作原理与它应该有的一个缺陷差不多。出现在右侧的图像供用户单击并使选项卡的其余部分滑入视图，只是“弹出”到它们应该在的位置而不是滑动，而实际内容正确滑入。

我尝试在 tab-handle-container 类上使用 .animate 和其他效果，但没有成功。我在下面发布了我的 HTML、jQuery 和 CSS 代码，供您提供任何提示。另外，我希望在 IE8 和 9 中进行这项工作，目前并不真正关心其他浏览器。谢谢！

HTML 和 jQuery

<script>
$(document).ready(function(){
    $(".content").hide();
    $(".myhandle").click(function(){
    $(".content", $(this).parents("li")).toggle('slide',{direction: "right"}, 1000);
    });
});

</script>


<html>
<body>
<div class="Container">
    <ul class="tab-list">
        <li>
            <div class="content">
            <h3>Contact Information</h3>
            <p>If you need technical assistance, please</p>
        </div>
        <div class="tab-handle-container">
        <img class="myhandle" src="contacttab.bmp"></img>
        </div>
    </li>
    <li>
        <div class="content">
        <h3>Some more stuff</h3>
        <p>This will be where more content is displayed</p>
        </div>
        <div class="tab-handle-container">
        <img class="myhandle" src="email.jpg"></img>
        </div>
    </li>
</ul>

CSS

html {margin: 0px;}

.myhandle { 
    cursor: hand;
}
.container {
right: -210px;
width: 240px;
height: 240px;
}
.tab-handle-container {
margin: 0px;
border: 0px;
width: 40px;
float: left;
}
.content{
padding: 5px;
float: left;
width: 200px;
background-color: #ffffff;
}
4

1 回答 1

0

在 MrSlayer 的帮助下解决了这个问题，.toggle在 div 中使用 Threw 两个元素，通过 CSS 关闭滚动，然后使用这个

$(document).ready(function(){
    $(".myhandle").toggle(function(){
        $(".slider", $(this).parents("li")).animate({right: "+=200"}, 700);
     },
    function() {
        $(".slider", $(this).parents("li")).animate({right: "-=200"}, 700);
      }
    );
});
于 2012-05-17T12:12:45.027 回答