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中没有字体颜色。

我使用什么技术将文本输入每个标签？

3 个答案: