2011-03-07 12 views
0

これは混乱を招く可能性がありますが、ここでは説明します。javascriptのコンテンツプレースホルダーの問題で第2のCSSが発生する

私はUserProfile.masterという名前のmasterpageを持っています。これはUserProfileWall.aspxにリンクされたcontentplaceholderを持っています。私はuserprofilewallページにいくつかのjavascriptと第2のCSSファイルを読み込もうとしています。マスターページ上のすべてをねじ込みます。私はjavascriptとdivテーブルに私を連れてくるdivテーブルにリンクを入れ子にすることはできないと言っているので、userprofilewall contentplaceholderにcssリンクを置くことはできません。

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でそれを取り出せます。

答えて

0

まず、Javascriptを修正して、インラインスクリプトコードではなく、$(document).ready()コール。これにより、 "投稿メッセージ"ボタンの問題が修正されました。次に、divのスタイル変更を処理する方法...

ここでは、クリックハンドラで質問で定義したCSSプロパティを設定するために.css()コールを追加しましたが、おそらく

$(document).ready()

.css()

:単一のCSSルールにこれらのCSSプロパティを移動し、ここで .addClass().removeClass()

を使用することは、私が行った変更についてチェックするためにいくつかのリンクです

.addClass()

.removeClass()

ここで私は私はあなたのソースコードから作成された静的なHTMLページから、JSとCSSの問題を修正するために使用されるソースです。それが役に立てば幸い。

<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> 
関連する問題