我試圖讓jQuery顯示/隱藏和attr顯示工作

Question

我想用jquery製作一個單獨的html頁面來顯示和隱藏div，模仿有多個頁面的想法。我試過show hide方法和地址欄鏈接的變化，但divs不會改變。我回到.attr（「style」，「display：block」）;方法，仍然無法正常工作。我放了一些我試圖展示並隱藏在這篇文章中的div，但並沒有把它們全部縮短。我之前在另一個項目中做過這個功能，所以按照步驟進行工作，但似乎不想使用這個項目。我在Adobe Brackets中編寫代碼，但我已經在Dreamweaver和崇高中嘗試了這一點，但仍然遇到同樣的問題。我不確定是因爲bootstrap搞砸了還是我缺少一些小東西。

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

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

Answer 1

試試這個代碼，它可以幫助你

$("#navPrimalkb").click(function(event){ 
    $("#mma").css("display", "block"); 
    //$("#exm").css("display", "none"); 
} 

Answer 2

，如果你有錨的ID，您可以使用$('#ID').hide()將其隱藏和顯示它使用$('#ID').show()