額外的CSS由JSFiddle提供

我想複製this JSFiddle，但它似乎像JSFiddle注入一些額外的CSS，這會導致副本顯示不同於JSFiddle上的版本。額外的CSS由JSFiddle提供

如何讓副本看起來像JSFiddle結果？

我試着複製的源碼，但是沒有奏效。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <title>Demo of simple tabs without jQuery UI - jsFiddle demo by syahrasi</title> 
 

 

 
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> 
 

 
    <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
 

 

 
    <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
 

 
    <style type='text/css'> 
 
     body { 
 
     padding: 20px; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     line-height: 1.5; 
 
     font-size: 14px;   
 
     } 
 

 
     .tabs-menu { 
 
     height: 30px; 
 
     float: left; 
 
     clear: both; 
 
     } 
 

 
     .tabs-menu li { 
 
     height: 30px; 
 
     line-height: 30px; 
 
     float: left; 
 
     margin-right: 10px; 
 
     background-color: #ccc; 
 
     border-top: 1px solid #d4d4d1; 
 
     border-right: 1px solid #d4d4d1; 
 
     border-left: 1px solid #d4d4d1; 
 
     } 
 

 
     .tabs-menu li.current { 
 
     position: relative; 
 
     background-color: #fff; 
 
     border-bottom: 1px solid #fff; 
 
     z-index: 5; 
 
     } 
 

 
     .tabs-menu li a { 
 
     padding: 10px; 
 
     text-transform: uppercase; 
 
     color: #fff; 
 
     text-decoration: none; 
 
     } 
 

 
     .tabs-menu .current a { 
 
     color: #2e7da3; 
 
     } 
 

 
     .tab { 
 
     border: 1px solid #d4d4d1; 
 
     background-color: #fff; 
 
     float: left; 
 
     margin-bottom: 20px; 
 
     width: auto; 
 
     } 
 

 
     .tab-content { 
 
     width: 660px; 
 
     padding: 20px; 
 
     display: none; 
 
     } 
 

 
     #tab-1 { 
 
     display: block; 
 
     } 
 

 
    </style> 
 

 

 

 

 
    <script type='text/javascript'>//<![CDATA[ 
 
     $(window).load(function(){ 
 
     $(document).ready(function() { 
 
      $(".tabs-menu a").click(function(event) { 
 
      event.preventDefault(); 
 
      $(this).parent().addClass("current"); 
 
      $(this).parent().siblings().removeClass("current"); 
 
      var tab = $(this).attr("href"); 
 
      $(".tab-content").not(tab).css("display", "none"); 
 
      $(tab).fadeIn(); 
 
      }); 
 
     }); 
 
     });//]]> 
 

 
    </script> 
 

 
    </head> 
 
    <body> 
 
    <div id="tabs-container"> 
 
     <ul class="tabs-menu"> 
 
     <li class="current"><a href="#tab-1">Tab 1</a></li> 
 
     <li><a href="#tab-2">Tab 2</a></li> 
 
     <li><a href="#tab-3">Tab 3</a></li> 
 
     <li><a href="#tab-4">Tab 4</a></li> 
 
     </ul> 
 
     <div class="tab"> 
 
     <div id="tab-1" class="tab-content"> 
 
      <p>Lorem ipsum dolor....</p> 
 
     </div> 
 
     <div id="tab-2" class="tab-content"> 
 
      <p>Donec semper dictum.... </p> 
 

 
     </div> 
 
     <div id="tab-3" class="tab-content"> 
 
      <p>Duis egestas fermentum.... </p> 
 
     </div> 
 
     <div id="tab-4" class="tab-content"> 
 
      <p>Proin sollicitudin tincidunt.... </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </body> 
 

 
</html>

來源

2015-08-28 Schemer

首先，不要試圖複製JSFiddle的源代碼，但可以將其呈現爲相對於JSFiddle的源代碼。

其次，你應該看看側邊欄上的包含。所以我們看到我們有JQuery 1.7.2和normalize.css。去包裝維護人員那裏，而不是來自第三方，並將它們包含在文檔的頭部。

第三，將CSS包含在文檔頭部的style標籤中，然後將HTML包含在正文中。 JavaScript應該包含在主體末尾的腳本標籤中，因此您不需要文檔就緒包裝器。

對CSS進行了一些修改，以便從浮動切換到內聯塊，刪除一些邊距和列表中的項目符號。 Etvoilà！

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <script src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/3.0.2/normalize.css" /> 
 
    <style> 
 
     body { 
 
     padding: 20px; 
 
     font-family: Arial, Helvetica, sans-serif; 
 
     line-height: 1.5; 
 
     font-size: 14px;   
 
     } 
 

 
     .tabs-menu { 
 
     height: 30px; 
 
     margin: 0; 
 
     } 
 

 
     .tabs-menu li { 
 
     height: 30px; 
 
     line-height: 30px; 
 
     display: inline-block; 
 
     margin-right: 10px; 
 
     background-color: #ccc; 
 
     border-top: 1px solid #d4d4d1; 
 
     border-right: 1px solid #d4d4d1; 
 
     border-left: 1px solid #d4d4d1; 
 
     } 
 

 
     .tabs-menu li.current { 
 
     position: relative; 
 
     background-color: #fff; 
 
     border-bottom: 0px; 
 
     } 
 

 
     .tabs-menu li a { 
 
     padding: 10px; 
 
     text-transform: uppercase; 
 
     color: #fff; 
 
     text-decoration: none; 
 
     } 
 

 
     .tabs-menu .current a { 
 
     color: #2e7da3; 
 
     } 
 

 
     .tab { 
 
     border: 1px solid #d4d4d1; 
 
     background-color: #fff; 
 
     float: left; 
 
     margin-bottom: 20px; 
 
     width: auto; 
 
     } 
 

 
     .tab-content { 
 
     width: 660px; 
 
     padding: 20px; 
 
     display: none; 
 
     } 
 

 
     #tab-1 { 
 
     display: block; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="tabs-container"> 
 
     <ul class="tabs-menu"> 
 
     <li class="current"><a href="#tab-1">Tab 1</a></li> 
 
     <li><a href="#tab-2">Tab 2</a></li> 
 
     <li><a href="#tab-3">Tab 3</a></li> 
 
     <li><a href="#tab-4">Tab 4</a></li> 
 
     </ul> 
 
     <div class="tab"> 
 
     <div id="tab-1" class="tab-content"> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Nullam pretium, est at congue mattis, nibh eros pharetra lectus, nec posuere libero dui consectetur arcu. Quisque convallis facilisis fermentum. Nam tincidunt, diam nec dictum mattis, nunc dolor ultrices ipsum, in mattis justo turpis nec ligula. Curabitur a ante mauris. Integer placerat imperdiet diam, facilisis pretium elit mollis pretium. Sed lobortis, eros non egestas suscipit, dui dui euismod enim, ac ultricies arcu risus at tellus. Donec imperdiet congue ligula, quis vulputate mauris ultrices non. Aliquam rhoncus, arcu a bibendum congue, augue risus tincidunt massa, vel vehicula diam dolor eget felis.</p> 
 
     </div> 
 
     <div id="tab-2" class="tab-content"> 
 
      <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p> 
 

 
     </div> 
 
     <div id="tab-3" class="tab-content"> 
 
      <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p> 
 
     </div> 
 
     <div id="tab-4" class="tab-content"> 
 
      <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <script> 
 
     $(".tabs-menu a").click(function(event) { 
 
      event.preventDefault(); 
 
      $(this).parent().addClass("current"); 
 
      $(this).parent().siblings().removeClass("current"); 
 
      var tab = $(this).attr("href"); 
 
      $(".tab-content").not(tab).css("display", "none"); 
 
      $(tab).fadeIn(); 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

來源

2015-08-28 02:16:01

這裏是你失蹤的三名CSS文件：

http://jsfiddle.net/css/normalize.css

http://jsfiddle.net/css/result-light.css

http://jsfiddle.net/css/embedded-light.css?update10082015

複製那些到項目文件夾，並從鏈接中刪除「/ CSS /」相對URL的一部分：

<link rel="stylesheet" type="text/css" href="normalize.css"> 
<link rel="stylesheet" type="text/css" href="result-light.css">

而且，無需雙包window.load和的document.ready：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(document).ready(function() { 
    $(".tabs-menu a").click(function(event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 
}); 
});//]]> 

</script>

應該是：

<script type='text/javascript'> 
$(document).ready(function() { 
    $(".tabs-menu a").click(function(event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 
}); 
</script>

這可能不是唯一的問題，而是一個開端。

來源

2015-08-28 01:42:37

感謝。第二個環節沒有死，但似乎沒有內容。添加第一個文件肯定有所不同。 :) – Schemer

看起來像第三個（也許是最重要的）：http://jsfiddle.net/css/embedded-light.css?update10082015 –

額外的CSS由JSFiddle提供

回答

相關問題