CSS和JavaScript元素的奇怪行为_Javascript_Css_Menu

CSS和JavaScript元素的奇怪行为

javascript css menu

CSS和JavaScript元素的奇怪行为,javascript,css,menu,Javascript,Css,Menu,我正在尝试使用样式构建Ajax菜单。很有趣： Ajax正在工作（） CSS正在工作( 但是…我不知道如何让他们一起工作这是“index.php”（主页）有趣的是，这段代码创建了两个菜单：一个使用Ajax，另一个使用CSS 如何将两者结合起来？我认为您的问题可能是您正在将整个页面（菜单+内容）加载到#content元素中，而不仅仅是实际内容，因此最终会有两个菜单。.load可以像$（“#content'）那样使用。load（.content/page.php.some_selector'））

我正在尝试使用样式构建Ajax菜单。很有趣：

Ajax正在工作（）

CSS正在工作(

但是…我不知道如何让他们一起工作

这是“index.php”（主页）

有趣的是，这段代码创建了两个菜单：一个使用Ajax，另一个使用CSS

如何将两者结合起来？

我认为您的问题可能是您正在将整个页面（菜单+内容）加载到

#content

元素中，而不仅仅是实际内容，因此最终会有两个菜单。

.load

可以像

$（“#content'）那样使用。load（.content/page.php.some_selector'））

其中

。一些选择器

代表通过AJAX加载的页面中的元素，您希望将其插入

#内容

。感谢Christian…我最终得到了两个菜单，因为我复制了DIV…这是我无法理解的行为…相同的代码在两个相似的实例中表现不同（虽然这两种行为都不完整-一个缺少css，另一个缺少js…经过与代码的长期斗争，我相信这不是css问题，但不知何故，这两个js文件正在相互覆盖：（…对我来说这两个文件很复杂。因此我将搜索另一个解决方案。感谢您的帮助。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Green Navigation with jQuery Drop Down Menu Effect.</title>
        <link type="text/css" href="css/style.css" rel="stylesheet" />

        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/js.js"></script>
        <script src="js/general.js"></script>
    </head>
    <body>
        <div id="menu">
            <ul class="menu">
                <li><a href="day001"><span>Tab 1</span></a></li>
                <li><a href="day002"><span>Tab 2</span></a></li>
                <li><a href="day003"><span>Tab 3</span></a></li>
            </ul>
        </div>

        <div id="menu">
            <ul class="menu">
                <li><a href="day001"><span>Tab 1</span></a></li>
                <li><a href="day002"><span>Tab 2</span></a></li>
                <li><a href="day003"><span>Tab 3</span></a></li>
            </ul>
        </div>

        <div id="content"></div>

        <a href="http://apycom.com/" style="display:none;"></a>
    </body>
</html>

$(document).ready(
    function()
    {
        // Initial
        $('#content').load('content/day001.php');

        // Handle menu clicks
        $('div#menu ul li a').click(function()
        {
            var page = $(this).attr('href');
            $('#content').load('content/' + page + '.php' );
            return false;
        });
    }
);