Question

我有当前的代码，并且我试图在幻灯片放映的一侧放置标签，随着图像的变化而变化。因此，我们所处的当前图像显示在活动选项卡的选项卡上，同时仍显示其他选项卡，但使用另一种颜色。附件代码是我到目前为止所提出的，但我似乎无法理解接下来会发生什么。我也尝试让我的文字垂直。我也无法更改tab 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块以启动Tab键功能，如下所示

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

4）就是这样。

如何在我的div中添加div，我的幻灯片改变了

1 个答案: