单击导航栏时背景颜色消失。

时间:2013-09-03 08:15:19

标签: html tags

    <script type="text/javascript">
        //slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
        var olditemclicked = null;
        $("#firstpane p.menu_head").click(function()
        {
            if(olditemclicked !== null){
                olditemclicked.css({backgroundImage:"url(./javascript/modules/baseModule/theme/standard/img/left.png)"});
            }
            $(this).css({backgroundImage:"url(./javascript/modules/baseModule/theme/standard/img/down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
            olditemclicked = $(this);
        });
    </script>

<div id="firstpane" class="menu_list"> <!--Code for menu starts here--> 
        <a href="#home" style="text-decoration:none"><p class="menu_head_home" style="border-top-left-radius:2px;"><span class="home_disp">Home</span></p></a>
        <p class="menu_head" style="border-top-left-radius:2px;">System</p>
        <div class="menu_body">
        <a href="#providers" id="provider-nav">Providers</a>
         <a href="#zones" id="zone-nav">Zones</a>
         <a href="#images" id="image-nav">Image Repository</a>  
        </div>
        <p class="menu_head">Service</p>
        <div class="menu_body" style="display:block">
            <a href="#instances" id="instance-nav">Instances</a>
         <a href="#servicegroup" id="servicegroup-nav">Service Group</a>
        </div>
        <% if(isAccessValid('UsersManagement')) { %>
        <p class="menu_head">User Management</p>
        <div class="menu_body">
          <a href="#users" id="users-nav">User</a>
        </div>
        <% } %>
        <p class="menu_head">Monitoring</p>
        <div class="menu_body">
        <a href="#alarms" id="alarm-nav">Alarms</a>
        <a href="#thresholds" id="threshold-nav">Threshold</a>
        </div>
        <!-- <p class="menu_head">MAINTENANCE</p>
        <div class="menu_body">
         <a href="#logs">Logs</a>
         <a href="#migration">Migration</a> 
        </div> -->
        <p class="menu_head">Settings</p>
        <div class="menu_body">
         <a href="#platformsettings" id="platform-nav">Platform Settings</a>
         <a href="#snmpsettings" id="settings-nav">Application Settings</a>
        </div>
  </div>

请让我回答一下?

1 个答案:

答案 0 :(得分:0)

看起来你还没有在$("#firstpane p.menu_head")中包装任何引用DOM的代码(例如$(document).ready)...尝试将其包装在下面,看看你是否有更多的成功

<script type="text/javascript">
   $(document).ready(function() {
        // Code referencing DOM here
   });
</script>