Question

是否可以更改背景颜色：＃97EFFC;选择菜单项时我希望在显示菜单项之前，正文内容背景是透明的。

Site.css
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
        background-color:transparent
    }
    .body-content {
        padding: 0;
        background-color: #97EFFC;
    }

Site.Master 
<div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
                <hr />
            </asp:ContentPlaceHolder>
            <footer>
                <p>It is  <%: DateTime.Now %> at Bob's Place</p>
            </footer>
        </div>

这是菜单，它是VS2013的标准 - java脚本是否在Site.css中

   <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a runat="server" href="~/">Home</a></li>
            <li><a runat="server" href="~/About">About</a></li>
            <li><a runat="server" href="~/Contact">Contact</a></li>
            <li><a runat="server" href="~/WeatherInfo/WeatherInfoMenu">WeatherInfo</a></li>
        </ul>
        <asp:LoginView runat="server" ViewStateMode="Disabled">
            <AnonymousTemplate>
                <ul class="nav navbar-nav navbar-right">
                    <li><a runat="server" href="~/Account/Register">Register</a></li>
                    <li><a runat="server" href="~/Account/Login">Log in</a></li>
                </ul>
            </AnonymousTemplate>
            <LoggedInTemplate>
                <ul class="nav navbar-nav navbar-right">
                    <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %>!</a></li>
                    <li>
                        <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                    </li>
                </ul>
            </LoggedInTemplate>
        </asp:LoginView>
    </div>
</

DIV＆GT;

Answer 1

当选择菜单项时，你可以这样做，

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
      $('.nav').click(function() {
        $('body').css('background-image', 'url(images/tabs3.png)');
      });
});
</script>
</head>

你可以像这样做任何造型，

$('body').css('background-color', '#97EFFC'); // background color change

$('body').css('background-color', 'rgba(255,0,0,0.5)'); // background semi transparent

jquery的简单示例：http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide

内容更改时更改正文内容背景颜色

1 个答案: