我使用什么技术将文本放入每个单独的选项卡？答案

【问题标题】：What technique do I use to get text into each individual tab?我使用什么技术将文本放入每个单独的选项卡？
【发布时间】：2014-04-16 07:58:54
【问题描述】：

我一直坚持这个问题，到目前为止，这是我的代码：

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

我不知道如何让这些选项卡菜单之一工作，我尝试了很多不同的方法，但没有任何工作。

【问题讨论】：

既然你用的是jquery，你有没有试过jquery ui tabs？ jqueryui.com/tabs

标签： javascript html css tabs logic

【解决方案1】：

这不是很好的代码，但它对我有用。唯一的问题是 #content 文本设置为白色字体，因此您看不到它，尽管它在那里。

您应该避免使用font 标签，因为它们已经严重过时，以及内联 JS。

【讨论】：

【解决方案2】：

我尝试运行您的代码。我发现文本写成#content_changer 元素，但它是白色的。以下是您可以解决的方法。

添加以下css规则

#content_changer{
    color:#000;
}

将$(this).html() 更改为$(this).text()。应该做这么多。

【讨论】：

【解决方案3】：

问题不在于您的 JS，而在于您的 CSS。导航中链接的字体颜色为白色，这意味着它将在内容区域中不可见。此外，不推荐使用 using，您需要将内容区域颜色设置为黑色。

这是一个有效的 jsFiddle： http://jsfiddle.net/8ftyy/

区别如下：

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

html 中没有字体颜色。

【讨论】：