我使用什麼技術將文本輸入每個單獨的選項卡？

我一直停留在了好久了，這是我到目前爲止的代碼：我使用什麼技術將文本輸入每個單獨的選項卡？

<html> 
    <head> 
     <script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></script> 
     <style type="text/css"> 
      body, html, div, ul, li, a { 
       margin:0; 
       padding:0; 
      } 
      body { 
       font-family:arial; 
       font-size:12px; 
       color:#000000; 

      } 
      .clear { 
       clear:both; 
      } 
      ul { 
       list-style:none; 
       position:relative; 
       z-index:2; 
       top:1px; 
       display:table; 
       border-left:5px solid #808080; 
      } 
      ul li { 
       float:left; 
      } 
      ul li a { 
       background:#000000; 
       color:#000000; 
       display:block; 
       padding:6px 15px; 
       text-decoration:none; 
       border-right:100px solid #000000; 
       border-top:1px solid #000000; 
       border-right:3px solid #808080; 
      } 
      ul li a.selected { 
       border-bottom:1px solid #808080; 
       color:#000000; 
       background:#808080; 
      } 
      h1 { 
       display:block; 
       width:600px; 
       margin:0 auto; 
       padding:200px 0; 
       color:#000000; 
      } 
      #navigation { 
       width:602px; 
       margin: 0 auto; 
      } 
      #content { 
       width:600px; 
       margin:0 auto; 
       height:200px; 
       background:#ffffff; 
       border:1px solid #000000; 
       z-index:1; 
       text-align:center; 
       padding:10px 0; 
      } 
      #logo { 
       width:600px; 
       margin:0 auto; 
       padding:10px 0; 
       text-align:right; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="navigation"> 
      <ul> 
       <li><a href="javascript:void(1);" id="tab1"><font color="white">Tab 1</a></li> 
       <li><a href="javascript:void(2);" id="tab2"><font color="white">Tab 2</a></li> 
       <li><a href="javascript:void(3);" id="tab3"><font color="white">Tab 3</a></li> 
       <li><a href="javascript:void(4);" id="tab4"><font color="white">Tab 4</a></li> 
       <li><a href="javascript:void(5);" id="tab5"><font color="white">Tab 5</a></li> 
      </ul> 
      <div class="clear"></div> 
     </div> 
     <div id="content"> 
      <p id="content_changer">You have selected Tab 1</p> 
      <p>See the page source for full code</p> 
     </div> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#navigation ul a').click(function() { 
        $('#navigation ul a').removeClass('selected'); 
        $(this).addClass('selected'); 
        $('#content_changer').html('You have selected ' + $(this).html()); 
       }); 
      }); 
     </script> 
    </body> 
</html>

我無法弄清楚如何讓這些選項卡菜單東西的工作之一，我已經嘗試了很多不同的方法，但沒有什麼會工作。

來源

2014-04-16 user3538068

既然你正在使用jQuery，你有沒有嘗試jQuery UI標籤？ https://jqueryui.com/tabs/ –

這不是很好的代碼，但它適用於我。唯一的問題是#content文本被設置爲字體顏色白色，所以你看不到它，儘管它在那裏。

您應該避免font標籤，因爲它們嚴重過時以及內聯JS。

來源

2014-04-16 08:16:37

我試着運行你的代碼。我發現文字寫成#content_changer元素，但它的白色。以下是您可以解決的方法。

添加下面的CSS規則

#content_changer{ 
    color:#000; 
}

更改$(this).html()到$(this).text()。這應該做的。

來源

2014-04-16 08:17:16 Dhananjay

問題不在於你的JS，而在你的CSS中。導航中的鏈接上的字體顏色爲白色，這意味着它在內容區域中將不可見。此外，使用已棄用，您需要將內容區域顏色設置爲黑色。

這裏是一個工作的jsfiddle： http://jsfiddle.net/8ftyy/

差異是這些：

#content_changer { 
color: black; 
} 
ul li a { 
color: white; 
}

並沒有字體顏色在HTML中。

來源

2014-04-16 08:19:19 chickenfist

我使用什麼技術將文本輸入每個單獨的選項卡？

回答

相關問題