Question

我正在创建一个带有固定导航的单页网站。在导航中有两个容器，左边的容器包含一系列标题，当您单击右侧的链接时这些标题会发生变化。我将包含标题的每个类的显示设置为“none”，并在单击右侧的链接时尝试使用Jquery显示它们。但我没有尝试任何工作。是否有可能使用淡入淡出元素和Jquery来实现一系列在单击链接时发生变化的标题？

这是我的代码：

<div class="single-page-nav">
    <div class="nav-container">
        <div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
            <div style="position: absolute; right: 0; top: 40px; z-index: 999999;">
                <a href="#section-1" class="mainNavLnk mainNav001">Home</a>
                <a href="#section-2" class="mainNavLnk mainNav002">About Us</a>
                <a href="#section-3" class="mainNavLnk mainNav003">Practice Areas</a>
                <a href="#section-4" class="mainNavLnk mainNav004">Contact</a>
            </div>
        </div>
        <div class="left">
            <div class="header001"><h1>Doug Peterson</h1></div>
            <div class="header002"><h1>About Us.</h1></div>
            <div class="header003"><h1>Practice Areas.</h1></div>
            <div class="header004"><h1>Contact.</h1></div>
        </div>
        <div class="nav"></div>
        <div class="clearboth"></div>                        
    </div>
</div>

帮助学生。

Answer 1

这是你想要的基本工作版本。您需要将其样式设置为您想要的样式，但行为（在单击菜单时显示/隐藏div）就在那里。您可能会考虑更改href和div的命名方案，以便根据点击的链接更轻松地选择标题div。

<html>
<head>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js">     </script>
<style>
    .header{
     display: none;
    }
</style>
<script>
     $(document).ready(function() {
        var selected = '';
        $( "a", "#headerLinks" )
            .on( "click", function(){
                var divCls = ".header00" + $( this ).attr( "href" ).substring($( this ).attr( "href" ).length -1 ); 
                if( selected.length > 0 ){
                    $( selected, "#headers" )
                        .hide('fade', function(){
                            $( divCls, "#headers" )
                                .show('fade');                           
                        });
                }else{
                    $( divCls, "#headers"  )
                      .show('fade');   
                }
                selected = divCls;
            });


     });

</script>
</head>
<body>
    <div class="single-page-nav">
    <div class="nav-container">
        <div style="max-width: 1200px; min-width: 960px; margin: 0 auto; position: relative;">
            <div id="headerLinks" style="position: absolute; right: 0; top: 40px; z-index: 999999;">
                <a href="#section-1" class="mainNavLnk mainNav001">Home</a>
                <a href="#section-2" class="mainNavLnk mainNav002">About Us</a>
                <a href="#section-3" class="mainNavLnk mainNav003">Practice Areas</a>
                <a href="#section-4" class="mainNavLnk mainNav004">Contact</a>
            </div>
        </div>
        <div class="left" id="headers">
            <div class="header header001"><h1>Doug Peterson</h1></div>
            <div class="header header002"><h1>About Us.</h1></div>
            <div class="header header003"><h1>Practice Areas.</h1></div>
            <div class="header header004"><h1>Contact.</h1></div>
        </div>
        <div class="nav"></div>
        <div class="clearboth"></div>                        
    </div>
</div>

</body></html>

JQuery在单页网站上淡入不同的标题

1 个答案: