Question

我有这个代码，我根据input调用的“{1}}文件中的长度文件创建iframe ou倍数iframe。我有这个div称为“tabConWrap”，我希望将每个上传的文件分开。我的问题是，当有2个以上的文件时，我的代码附加到正文，类“tabConWrap”和ul称为“标签”等等..但是，li标记包含a标记，它们会成为一个链接，而不是一个标签。

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

<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>

JQuery / Javascript - 附加不适用于“a”标记

0 个答案: