我试图让jquery show / hide和attr dislay工作

时间：2015-09-05 20:02:41

标签： javascript jquery html5 twitter-bootstrap

我正在尝试使用jquery创建一个单独的html页面网站来显示和隐藏div，模仿有多个页面的想法。我已经尝试了show hide方法和地址栏链接更改但div不会更改。我回到了.attr（＆＃34; style＆＃34;，＆＃34; display：block＆＃34;）;方法仍然无法正常工作。我把一些我试图展示的div和隐藏在这篇文章中，但没有把它们全部用来保持帖子更短。我之前在另一个项目中执行了此功能，因此按照步骤进行工作，但似乎不想使用此项目。我正在使用Adobe Brackets进行编码，但我已经在Dreamweaver和sublime中尝试了这个并且仍然遇到了同样的问题。我不确定是不是因为引导程序搞乱了它，或者我错过了一些小东西。

＆＃13;
＆＃13; 
<script>
$(Document).ready(function(){ //main menu Home
    $("#navHome").click(function(event){
       $("#home").attr("style", "display: block");
       $("#primalkb").attr("style", "display: none");
       $("#primalstr").attr("style", "display: none");
       $("#mma").attr("style", "display: none");
       $("#kidsma").attr("style", "display: none");
       $("#location").attr("style", "display: none");
       $("#schedule").attr("style", "display: none");
       $("#freetr").attr("style", "display: none");       
           /*$("#home").show();
            $("#primalkb, #primalstr, #about, #fighttraining, #location, #kidsMA, #schedule, #freetr").hide();*/
});
    $("#navPrimalkb").click(function(event){
            $("#primalkb").attr("style", "display: block");
            $("#home").attr("style", "display: none");
            $("#primalstr").attr("style", "display: none");
            $("#mma").attr("style", "display: none");
            $("#kidsma").attr("style", "display: none");
            $("#location").attr("style", "display: none");
            $("#schedule").attr("style", "display: none");
            $("#freetr").attr("style", "display: none");       
           
        });
    ("#navPrimalstr").click(function(event){
        $("#primalstr").attr("style", "display: block");
        $("#home").attr("style", "display: none");
        $("#primalkb").attr("style", "display: none");
        $("#mma").attr("style", "display: none");
        $("#kidsma").attr("style", "display: none");
        $("#location").attr("style", "display: none");
        $("#schedule").attr("style", "display: none");
        $("#freetr").attr("style", "display: none");       

    });
    $("#navKidsma").click(function(event){
        $("#primalkb").attr("style", "display: block");
        $("#home").attr("style", "display: none");
        $("#primalstr").attr("style", "display: none");
        $("#mma").attr("style", "display: none");
        $("#kidsma").attr("style", "display: none");
        $("#location").attr("style", "display: none");
        $("#schedule").attr("style", "display: none");
        $("#freetr").attr("style", "display: none");       

    });
    $("#navMMA").click(function(event){
        $("#mma").attr("style", "display: block");
        $("#home").attr("style", "display: none");
        $("#primalstr").attr("style", "display: none");
        $("#primalkb").attr("style", "display: none");
        $("#kidsma").attr("style", "display: none");
        $("#location").attr("style", "display: none");
        $("#schedule").attr("style", "display: none");
        $("#freetr").attr("style", "display: none");       

    });
    $("#navSchedule").click(function(event){
        $("#schedule").attr("style", "display: block");
        $("#home").attr("style", "display: none");
        $("#primalstr").attr("style", "display: none");
        $("#mma").attr("style", "display: none");
        $("#kidsma").attr("style", "display: none");
        $("#location").attr("style", "display: none");
        $("#primalkb").attr("style", "display: none");
        $("#freetr").attr("style", "display: none");       
    });
    $("#navFreetr").click(function(event){
        $("#freetr").attr("style", "display: block");
        $("#home").attr("style", "display: none");
        $("#primalstr").attr("style", "display: none");
        $("#mma").attr("style", "display: none");
        $("#kidsma").attr("style", "display: none");
        $("#location").attr("style", "display: none");
        $("#schedule").attr("style", "display: none");
        $("#primalkb").attr("style", "display: none");
    });
});
    </script>
＆＃13; 
<link href="css/bootstrap.min.css" rel="stylesheet">
    <link hre="css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">

<!-------------Scripts--------------------------->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--<script type="text/javascript" src="js/modernizr.custom.24059.js"></script>-->
    <!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
    <!--<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
    </head>
   <!-- <style>
        #linkings {
color: limegreen;
            text-decoration-color: limegreen;
        }
    </style>-->
    <body>
        <div id="bckg" class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <a href="#" class="navbar-brand"><img src="img/logo.png" width="150" alt="primal kickboxing logo"></a>
                <button class="navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-rght">
                        <li class=""><a class="links" id="navHome" rel="home" href="#">HOME</a></li>
                        <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a>
                       <ul class="dropdown-menu">
                        <li><a class="links" id="navPrimalkb" rel="primal kickboxing" href="#primalkb">Primak Kickboxing</a></li>   
                        <li><a class="links" id="navPrimalstr" rel="primal strength" href="#primalstr">Primal Strength Training</a></li>   
                        <li><a class="links" id="navKidsma" rel="kidsmma" href="#kidsma">Kids Martial Arts</a></li>    
                        <li><a id="navMMA" class="links" rel="mma" href="#mma">MMA Training</a></li>
                       </ul>
                        </li>
                        <li><a id="navSchedule" rel="schedule" class="links" href="#sch">SCHEDULE</a></li>
                        <li><a id="navLocation" class="links" rel="location" href="#location">LOCATION</a></li>
                    </ul>
                </div>  
        </div>
    </div>
      
      <!---------------Home----------------------------->
    <div id="home" style="display: block">
        <h1>ssx kj</h1>            
    </div>
<!--------------Class---------------------------->
   <!-- <div id="class" style="display:none"> 
        
    </div>-->
    <!---------------subfight class----------------------------->
    <!---Kickboxing------------>
        <div id="primalkb" style="display: none">
            <h1>s46545646s</h1>
        </div>
    <!---Strength Training---->
        <div id="primalstr" style="display:none">
            <h1>ssdjvkss</h1>
        </div>
    <!--Kids Martial Arts----->
        <div id="kidsma" style="display: none">
            <h1>sjsdfs</h1>
        </div>
    <!-----Fight Training----->
        <div id="mma" style="display: none">
            <h1>sqs</h1>
        </div>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

试试这段代码它可以帮到你

$pages

答案 1 :(得分：0)

如果您拥有锚点的ID，则可以使用$('#ID').hide()隐藏它并显示它使用$('#ID').show()

相关问题
最新问题