Question

这可能会让人感到困惑，但现在就这样了。

我有一个名为UserProfile.master的母版页它有一个contentplaceholder链接到UserProfileWall.aspx现在我试图在userprofilewall页面加载一些javascript和第二个css文件，但是当我添加第二个链接到css文件时它会拧紧在母版页上的所有内容。我不能把css链接放在userprofilewall contentplaceholder中，因为它说链接不能嵌套在div表中，这会将我带到javascript和div表。

java脚本只运行一个按钮单击事件，用于将文本从textarea添加到div中。但由于某种原因它不起作用。不是没有第二个css

这是我想在第二个css中插入的内容：

div{
    width:400px;
    height:400px;
    border:1px solid red;
    padding:10px;
    margin-top:10px;
}

我的代码到目前为止整个userprofilewall

<%@ Page Title="" Language="C#" MasterPageFile="~/UserProfile.master" AutoEventWireup="true" CodeFile="UserProfileWall.aspx.cs" Inherits="Default2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="css/Style.css" rel="stylesheet" type="text/css" />

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $('button').click(function () {
        var x = $('textarea').val();
        $('div').html(x);
    });
        </script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>

<div></div>

</asp:Content>

如何修复javascript或将css修复到我的userprofilewall中以便javascript可以接收它

Answer 1

首先，我需要修复Javascript以在$(document).ready()调用中添加按钮单击处理程序，而不是内联脚本代码。这修复了“发布消息”按钮的问题。接下来，如何处理div的样式更改...

现在，我添加了一个.css()调用来设置您在单击处理程序中内联问题中定义的css属性，但您可能希望将这些css属性移动到单个CSS规则中并使用.addClass()和.removeClass()

以下是一些有关我所做更改的链接：

这是我用来修复JS和CSS问题的源代码，来自我从源代码创建的静态HTML页面。希望它有所帮助。

<html>
<head>
   <link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('button').click(function () {
        var x = $('textarea').val();
        $('div').html(x);
        $('div').css({width:"400px",height:"400px",border:"1px solid red",padding:"10px","margin-top":"10px"});
        // or $('div').addClass('name of css rule with above css props');
        // or $('div').removeClass('name of css rule with above css props');
    });
});
</script>
<textarea style="border: 0" cols="77" rows="5"></textarea>
<button>Post Message</button>
<div></div>
</body>
</html>

使用javascript进行内容占位符问题的第二个css

1 个答案: