JQuery/Javascript-Append不适用于；a「；标签_Javascript_Jquery_Html_Css

JQuery/Javascript-Append不适用于；a「；标签

javascript jquery html css

JQuery/Javascript-Append不适用于；a「；标签,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一段代码，其中我创建了一个iframe ou，它根据input中输入的长度文件乘以iframe，称为“file”。我有一个名为“tabConWrap”的div，我想把上传的每个文件分别放在不同的选项卡中。我的问题是，当有两个或更多的文件时，我的代码附加到body、类“tabConWrap”和名为“tabs”的ul等等。。但是，带有a标记的li标记在中，它们变成了一个链接，而不是本应成为的选项卡注意：当我写这篇文章时： <div class="tabConWrap"> &

我有一段代码，其中我创建了一个iframe ou，它根据

input

中输入的长度文件乘以iframe，称为“file”。我有一个名为“tabConWrap”的

div

，我想把上传的每个文件分别放在不同的选项卡中。我的问题是，当有两个或更多的文件时，我的代码附加到body、类“tabConWrap”和名为“tabs”的

ul

等等。。但是，带有

标记的

li

标记在中，它们变成了一个链接，而不是本应成为的选项卡

注意：当我写这篇文章时：

<div class="tabConWrap">
    <ul class="tabs">
        <li><a href="http://localhost/show_lines.php">Tab button 1</a></li>
    </ul>

    <div class="tabContainer">
        <iframe></iframe>
    </div>
</div>

与HTML一起，它们工作得很好。但是有了附加，就不需要了。不管怎样，我做错了什么

这是我的全部代码：

<!DOCTYPE html>
<html>
<head>
<style>
html, body, iframe {height:100%; width: 100%;}
.tabConWrap {
    width:100%;
    height:100%;
    position:relative;
    margin:10px auto 30px;
    border-bottom:4px solid #39f;
    text-align:left;
}
.tabs {
    width:auto;
    height:28px;
    margin:0px 0px;
    padding:0px 0px;
}
.tabs li {    
    margin:0px 2px 0px 0px;
    padding:0px 0px;
    display:inline;
    font:bold 12px Arial,Sans-Serif;
}
.tabs li a {
    background-color:#39f; 
    color:white;
    padding:7px 10px; 
    text-decoration:none;
    border:1px solid #ccc;
    border-bottom:none;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;
}
.tabs .currentTab {
    background-color:white; 
    color:#999;
    position:relative;
    z-index:7;
}
.tabContainer {
    padding:10px;
    height:100%;
    background-color:white;
    border:1px solid #ccc;
    position:relative;
    margin-top:-3px;
    z-index:2;
    overflow:hidden;
}
.tabContainer iframe {
    border:none;
    width:100%;
    height:100%;    
}

h2#loading {
    width:100px;
    text-align:center;
    font:bold 11px Arial,Sans-Serif;
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-50px;
    padding:5px 0px;
    background-color:#BC151A;
    color:white;    
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script>
$(function(){
 $("form").submit(function(e){ e.preventDefault(); });
 $("input[name = 'submitbtn']").click(function(){
        if (document.getElementsByName("file")[0].files.length == 0){
         alert('Insert files!');
        }else if(document.getElementsByName("file")[0].files.length == 1){
         $('body').append('<iframe src="http://localhost/show_lines.php"></iframe>');
        }else{
         $('body').append('<div class="tabConWrap"><ul class="tabs"></ul><div class="tabContainer"><iframe></iframe></div></div>');
          for(var i = 2; i <= document.getElementsByName("file")[0].files.length; i++){
           $('.tabs').append('<li><a href="http://localhost/show_lines.php">Sheet '+i+'</a></li>');
          }
        }
 });

    var tabs = $('.tabs li a'),
    tabContents = $('div.tabContainer');

    tabs.eq(0).addClass('currentTab');

    tabs.click(function() {
        tabs.removeClass();
        $(this).addClass('currentTab');
        tabContents.animate({height:0}, 'fast')
            .find('iframe').attr('src', $(this).attr('href'));
        $('body').append('<h2 id="loading">Loading...</h2>');
        return false;    
    });
    $('div.tabConWrap iframe').bind("load", function() {
        tabContents.animate({height:'100%'}, 'fast');
        $('h2#loading').remove();
    });
});
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data"> 
 <input type="file" multiple name="file" />
 <input type="submit" name="submitbtn" />
 </form>
</body>
</html>


html，正文，iframe{高度：100%；宽度：100%；}
烟草包装{
宽度：100%；
身高：100%；
位置：相对位置；
利润率：10px自动30px；
边框底部：4px实心#39f；
文本对齐：左对齐；
}
.标签{
宽度：自动；
高度：28px；
保证金：0px 0px；
填充：0px 0px；
}
.tabs li{
保证金：0px 2px 0px 0px；
填充：0px 0px；
显示：内联；
字体：粗体12px Arial，无衬线；
}
李安先生{
背景色：#39f；
颜色：白色；
填充：7px 10px；
文字装饰：无；
边框：1px实心#ccc；
边框底部：无；
-webkit边界半径：5px 5px 0px 0px；
-moz边界半径：5px 5px 0px 0px；
边界半径：5px 5px 0px 0px；
}
.tabs.currentTab{
背景色：白色；
颜色：#999；
位置：相对位置；
z指数：7；
}
.tabContainer{
填充：10px；
身高：100%；
背景色：白色；
边框：1px实心#ccc；
位置：相对位置；
利润上限：-3px；
z指数：2；
溢出：隐藏；
}
.tabContainer iframe{
边界：无；
宽度：100%；
身高：100%；
}
h2#加载{
宽度：100px；
文本对齐：居中；
字体：粗体11px Arial，无衬线；
位置：绝对位置；
顶部：0px；
左：50%；
左边距：-50px；
填充：5px0px；
背景色：#BC151A；
颜色：白色；
}
$（函数（）{
$（“form”）.submit（函数（e）{e.preventDefault（）；}）；
$（“输入[名称='submitbtn']）。单击（函数（）{
if（document.getElementsByName（“文件”）[0].files.length==0）{
警报（'插入文件！'）；
}else if（document.getElementsByName（“文件”）[0].files.length==1）{
$（'body'）。追加（''）；
}否则{
$（'body'）。追加（'ul class=“tabs”>）；
对于（var i=2；我在你的控制台中发现javascript错误了吗？@DavidPartyka nothing，因为代码没有问题。但是他们没有设置这个$（'.tabs'）。append（'
'）；
就像一个标签一样，这篇文章似乎表明你可以继续添加标签，但你需要调用.tabs（“刷新”）