html - 动态 Div 或将多个功能分配给 CSS/HTML 中的 Div

Question

我对 Web 开发比较陌生。这个问题很笼统，但我会提出具体的用户案例。

用例 1： 我在网页上有一个 div 元素。当页面第一次加载时，这个 div 会运行一个 5 秒的小动画。我想做的是，当这个动画结束时，我希望同一个 div 包含一些其他元素 - 它可以是图像、链接、另一个动画等。也就是说，一个容器 - div - 在一个容器上托管多个元素时间尺度。前 5 秒动画，然后是图像或链接。哪些 Javascript 方法允许我这样做？

用例 2： 同样，我在页面中有一个 div 元素。现在这个 div 元素就像一个选项卡式浏览器 - 您单击不同的选项卡以查看不同的网页。同样，我希望将其设为“标签式”div。例如，当用户将鼠标悬停在选项卡 1 上时，该 div 将显示一个视频，当将鼠标悬停在选项卡 2 上时，它将在同一 div 中显示另一个视频 - 即替换旧视频。这些选项卡可以被认为是一个花哨的链接。

或者，首先，是否有替代“div”来执行上述操作？

谢谢，SMK。

score 1 · Accepted Answer

这是用例 1 的示例。

在您的 html 中，您需要包含 5 秒动画，我认为这是一个 gif？虽然它可以是任何内容。为了这个例子，我将它显示为一个 div。

我用过的html：

<div id="example">
  <div id="somecontent">&nbsp;</div>
  <div id="morecontent">&nbsp;</div>
</div>

CSS：

#example
{
  width:500px;
  height:500px;
  background-color:#f00;
  padding:10px;    
}

#somecontent
{
  width:200px;  
  height:200px;    
  background-color:#fff;
}

#morecontent
{
  width:200px;
  display:none;
  height:200px;    
  background-color:#000;
}

和javascript（使用jQuery）：

setTimeout(function() {
   $("#somecontent").fadeOut("slow", function() {
      $("#morecontent").fadeIn("slow"); 
   });
}, 5000);

看看这个 jsfiddle 的实际效果 - http://jsfiddle.net/fntWZ/

对于用例 2，它会更复杂。尝试寻找一些可以帮助解决此问题的不同插件

score 1 · Accepted Answer

用例 2 的解决方案 - 这是一个稍微冗长的解决方案，但它非常灵活，可以很容易地扩展到任意数量的选项卡

我们将解决方案分为 3 个部分 - CSS、HTML 和 JQuery。

我们先来看看CSS部分

<style>

#tab_holder {
    width: 350px; !important
}
    #tab_holder .tabs {
        float: left;
        height: 20px;
        padding: 5px;
        border: 1px solid #eee;
        border-bottom: none;
        width: 50px;
        cursor: pointer;
        border-radius: 5px 5px 0 0;
    }

    #tab_holder .tabs:hover {
        background-color: #eee;
    }   

    #tab_holder #content_holder {
        width: 400px; !important
        margin: 0 0 0 0;
        border: 1px solid #000;
        padding: 10px;
        float: left;
        border-radius: 0 5px 5px 5px;
    }

.content {
    visibility: hidden;
}

</style>

现在让我们看一下这个解决方案的 HTML 部分

<div id="tab_holder">
    <div id="tab1" class="tabs">Video1</div>
    <div id="tab2" class="tabs">Video2</div>
    <div id="tab3" class="tabs">Video3</div>
    <div id="content_holder">
        <div id="main_content">Select a tab to see the video..</div>
    </div>
</div>

<!-- These are divs in which you put your actual content. 
     They are always hidden -->
<div id="content1" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/4Z6YUGGlwtA?rel=0" frameborder="0" allowfullscreen></iframe> 
<    /div>   
<div id="content2" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/s13dLaTIHSg?rel=0" frameborder="0" allowfullscreen></iframe>
</div>   
<div id="content3" class="content">
    <iframe width="200" height="200" src="http://www.youtube.com/embed/I1qHVVbYG8Y?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

您可以看到每个选项卡都由一个使用 CSS 部分中的“选项卡”类的 div 表示。如果您需要添加一个新选项卡，您所要做的就是添加一个新的 div 并提供一个新的 id。例如，要添加第四个选项卡，您可以说 -

<div id="tab4" class="tabs">Video4</div>

它是如此简单。现在我喜欢这种方法的一点是，您可以将要显示的内容也放在 div 中，而不是将其嵌套在 jquery 下。在这种情况下，我们使用 id 为content1 content2 content3的 div

这使您可以灵活地在将内容输入 div 并使用正常标记时进行扩展，而不会感到困惑和轻松。

这些 div 是不可见的，因为我们已将它们的可见性设置为隐藏是 CSS。

如果您添加一个新的选项卡 div，您还必须添加一个新的内容 div。

现在我们进入 JQuery 部分 -

$(document).ready(function (){
        /* Add the listeners. */
        $("#tab1").mouseover(function (){
            switch_content('content1')
        });
        $("#tab2").mouseover(function (){
            switch_content('content2')
        });
        $("#tab3").mouseover(function (){
            switch_content('content3')
        });
    });

    function switch_content(name){
        $("#main_content").fadeOut('fast',function (){
            $("#main_content").html($("#"+name).html());
            $("#main_content").fadeIn('fast');
        });
    }

上面的 JQuery 函数非常简单。每个选项卡都附加了一个动作侦听器，该侦听器由鼠标悬停事件触发。因此，如果您使用 id=tab4 添加另一个选项卡，并使用 id=content4 添加其各自的内容 div，那么您只需在 jQuery 中添加：

$("#tab4").mouseover(function (){
    switch_content('content4')
});

所以扩展代码变得非常容易。

你可以在我的网站演示部分找到一个工作演示

尖端 -

避免使用悬停，因为它会因意外悬停而产生令人讨厌的用户体验，并且移动平台很难模拟此事件。他们中的大多数都退回到点击。所以我建议改用点击事件。
如果必须使用，请使用 HTML 视频标签，如果用户将鼠标悬停在另一个选项卡上，则使用 JS 暂停视频。这将提供更好的用户体验。

score -1 · Accepted Answer

用例答案：1

CSS：

<style>
#myDiv {
    height:0;
    width:0;
    position:absolute;
    border:1px solid red;
}
</style>

脚本：

$(document).ready(function(){
    $("#myDiv").animate({width:"100px", height:"100px"},5000, function(){
        var image = new Image();
        image.src = "dropdownContainerBottomMiddle.png"; //your image src goes here
        $("#myDiv").append(image);

            //you can append more content by using setTimeout function

            setTimeout(function(){
        var anc = "<a href=\"http://stackoverflow.com\">stackoverflow</a>";
        $("#myDiv").append(anc);
    }, 1000);

    });
});

html:

<div id="myDiv"></div>

html - 动态 Div 或将多个功能分配给 CSS/HTML 中的 Div

3 回答 3

Related

Reference