0

我更新了我的问题！所以，这里是小提琴：http: //jsfiddle.net/kozola/8M6wS/

我的代码：

<style>
#container {
margin-top: 200px;
position: relative; /* needed for absolutely positioning #a and #c */
padding: 0 10px 0 100px; /* will offset for width of #a and #c; and center #b */
border: gray 1px dotted; /* just for the show */
float: left; /* To dynamicaly change width according to children */
height: 100px;
}

#container div { height: 100px; }

#tab1 {
position: absolute;
top: 0;
width: 100px;
background: gray;
left: 0;
}

#fin {
position: absolute;
top: 0;
width:10px;
background: #eee;
right: 0;
}

#content {
white-space: nowrap;
}

#content div { display: inline-block; }
#content img { height: 100px; }

.description { position: absolute; border: 1px solid red; width: 200px; height: 100px; }
</style>



<div id="container">
<div id="tab1">fixed width content</div>
<div id="content">
    <div><a href="#" id="first"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="first">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />    <img src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>
    </div>
    <div><a href="#" id="second"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="second">
        <img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" /><img class="second" src="http://goo.gl/SIiJfX" />
        <div class="description" style="display: block;">this is a description</div>        
    </div>
    <div><a href="#" id="third"><img src="http://goo.gl/FZqqPH" /></a></div>
    <div class="third">
        <img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" /><img src="http://goo.gl/SIiJfX" />
    </div>
</div>
<div id="fin">fin</div>
</div>


<script>

$(document).ready(function(){
$(".first").hide();
$("#first").show();

$("#first").click(function(){
    $(".first").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".second").hide();
$("#second").show();

$("#second").click(function(){
    $(".second").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

$(document).ready(function(){
$(".third").hide();
$("#third").show();

$("#third").click(function(){
    $(".third").toggle( "slide", {direction: "left"}, 1000 ,function() {
    });

});
});

</script>

我想要完成的是： 1. 我一次只需要打开一个标签！因此，如果我打开一个选项卡，其他选项卡就会关闭。我知道我可以为每次未打开的每个 div 编写关闭函数，但我将有 ~100 个 div，所以这行不通。2. 完全想不通为什么中间部分不光滑！也许你们有一些想法？

非常感谢大家！

4

1 回答 1

0

尝试使用此示例

                $(document).ready(function () {

        $(".title").click(function () {

            $(".content").slideUp("fast");

            $(this).find('.expand').removeClass('collapse');
            if ($(this).next().is(":hidden") == true )
            {
                $('.expand').removeClass('collapse');
                $(this).next().slideDown("normal")
                $(this).find('.expand').addClass('collapse');
            }
        }); 
    });
于 2014-03-19T12:45:07.853 回答