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

Question

我在这方面已经坚持了很长时间，到目前为止我的代码如下：

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

我不知道如何让这些标签菜单的东西工作，我已经尝试了这么多不同的方法，但都不起作用。

Answer 1

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

你应该避免使用font标签，因为它们已经过时了，就像内联JS一样。

Answer 2

我试过运行你的代码。我发现文本是写成#content_changer元素的，但它是白色的。下面是如何解决它的方法。

添加以下css规则

#content_changer{
    color:#000;
}

将$(this).html()更改为$(this).text()。这已经足够了。

Answer 3

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

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

区别在于：

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

在html中没有font-color。