javascript - 如何在随幻灯片放映而变化的 div 中添加 div

Question

我有当前的代码，我正在尝试将标签放在幻灯片的一侧，这些标签会随着图像的变化而变化。因此，我们所在的当前图像由事件选项卡显示，同时仍显示其他选项卡，但颜色不同。附加的代码是我到目前为止想出的，但我似乎无法理解接下来会发生什么。我也试着让我的文字垂直。我也无法更改选项卡 div 的高度参数，我更改了 html 但它们不会变高。

我刚开始学习，希望有人能帮助我。谢谢。

这是我的 HTML 代码:

<div id="content_transparent"> 
    <div id="slideshow">
        <div>
            <div>
                <div id="barChart_div" style="width: 60px; height: 50px;float:left;background-color: blue;"><p class="css-vertical-text">tab1</p></div>
                <div id="stats_div" style="width: 60px; height: 50px; float:left;background-color: green; margin-top:50px;margin-left:-60px">tab2</div>
                <div id="lineChart_div" style="clear:left; width: 60px; height: 50px;background-color: red;">tab3</div>
                <div id="cdfChart_div" style="width: 60px; height: 50px;background-color: orange;">tab4</div>
            </div>
            <div class="fadein">
                <div><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
                <div><img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"></div>
                <div><img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"></div>
            </div>
        </div>

这是我的CSS:

p.css-vertical-text {
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    font-family:‘Trebuchet MS’, Helvetica, sans-serif;
    font-size:24px;
    font-weight:normal;
}

.fadein {
    position:relative;
    height:572px;
    width:100%;
    left:0;
}

.fadein img {
    position:absolute;
    top:0;
    width:95%;
    height:572px;
    left:60px;
}

.fadein div {
    position:absolute;
    height:100%;
    width:100%;
}

#content_transparent {
    z-index:2;
    color:#FFFFFF;
    text-align:center;
    background:rgba(0, 0, 0, 0.5);
    border:3px solid black;
    height:1600px;
    width:80%;
    margin-left:10%;
    margin-right:10%;
    margin-top:30px;
}

#slideshow{
    width:100%;
    height:575px;
    background-color:black;
}

Answer 1

您可能正在寻找 jQuery Tabs .

它提供易于使用的选项卡功能，并习惯于以下方式:

1) 在 HTML 文档中包含 jQuery 和 jQuery UI javascripts，并包含 jQuery UI CSS 文件

2) 您定义选项卡及其内容如下

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>
  <div id="tabs-1"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
  <div id="tabs-2"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
  <div id="tabs-3"><img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"></div>
</div>

3) 您创建一个 javascript block 来启动标签功能，如下所示

<script>
    $(function() {
       $( "#tabs" ).tabs();
    });
</script>

4) 就是这样。