如何一次只顯示一個切換div

Question

我想知道我該如何做到這一點，一次只能選擇一個。請記住這是用於Wordpress的。出於某種原因，它不喜歡「$」。如果比我所做的更容易，請讓我知道！任何反饋都有幫助！

HTML

<div id="top-bar" style="width:100%; background-color: #1f2122 !important; padding: 10px 0;"> 
    <div style="width: 392px; margin:auto;"> 
     <div id="locations"> 
      <div id="pull" style=" margin:auto;display: inline-block; padding: 0 9px;"> 
       <a href="#" class="pullmeshr">Sherman Campus</a> 
      </div> 
      <div id="pull" style=" margin:auto;display: inline-block;"> 
       <a href="#" class="pullmedur">Durant Campus</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="width: 100%; background-color: #3a3e3f !important;"> 
    <div style="width: 50%; margin: auto;"> 
     <div id="pullmeinfoshr"> 
      <div id="closeshr"> 
       <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png"> 
      </div> 
      <div> 
       Sherman Campus Info - Coming Soon 
      </div> 
     </div> 
    </div> 
    <div style="width: 50%; margin: auto;"> 
     <div id="pullmeinfodur"> 
      <div id="closedur"> 
       <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png"> 
      </div> 
      <div> 
       Durant Campus Info - Coming Soon 
      </div> 
     </div> 
    </div> 
</div> 
<!-- script to animate campus selector--> 

SCRIPT

<script> 
    window.onOff = 0; 
    jQuery(".pullmeshr").click(function() { 
     jQuery(".pullmeshr").animate(500); 
     jQuery("#pullmeinfoshr").slideDown(500); 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closeshr").click(function() { 
      jQuery("#pullmeinfoshr").slideUp(500); 
     window.onOff = 0; 
    }); 
    } 

    jQuery(".pullmedur").click(function() { 
     jQuery(".pullmedur").animate(500); 
      jQuery("#pullmeinfodur").slideDown(500); 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closedur").click(function() { 
      jQuery("#pullmeinfodur").slideUp(500); 
     window.onOff = 0; 
    }); 
} 
</script> 
<!-- end campus selector script --> 

Answer 1

如果你只是想有機會獲得jQuery的標識$你可以按照WordPress的docs：

但是，如果你真的像短$而不是jQuery，你可以使用 follo在你的代碼翼包裝：

jQuery(document).ready(function($) { 
    // Inside of this function, $() will work as an alias for jQuery() 
    // and other libraries also using $ will not be accessible under this shortcut 
}); 

對於在評論這個問題的一部分，試試這個（這是一個簡單的解決方案，它適用於2個選擇，但選擇列表中有更好的方式比規定每個ID /班，使用CSS同胞選擇和HTML結構或其他各種方法）

<script> 
    window.onOff = 0; 
    jQuery(".pullmeshr").click(function() { 
     jQuery(".pullmeshr").animate(500); 
     jQuery("#pullmeinfoshr").slideDown(500); 
     jQuery("#pullmeinfodur").slideUp(500); //add this 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closeshr").click(function() { 
     jQuery("#pullmeinfoshr").slideUp(500); 
     window.onOff = 0; 
    }); 
    } 

    jQuery(".pullmedur").click(function() { 
     jQuery(".pullmedur").animate(500); 
     jQuery("#pullmeinfodur").slideDown(500); 
     jQuery("#pullmeinfoshr").slideUp(500); //add this 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closedur").click(function() { 
     jQuery("#pullmeinfodur").slideUp(500); 
     window.onOff = 0; 
    }); 
} 
</script>