Question

我正在尝试自己的HTML和CSS程序，就像你在w3schools或其他网站上看到的那样。我想知道是否有办法制作另一个按钮，只显示HTML并忽略CSS而不必让用户输入两者。这是我的代码，所以我仍然希望制作一个切换按钮，关闭和打开CSS，但我不知道如何做到这一点。

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style> textarea { 
            height: 100px;
            width: 1000px; 
  } </style>
</head>
<body> 
  <form id='assignment5' method="post" action="assignment5.html">
     <table>
        <tr><td><textarea name="html">Enter HTML Here</textarea></td></tr>
        <tr><td><textarea name="css">Enter CSS Here</textarea></td></tr>
     </table>
     <input type="submit" value="Launch">
     <input type="reset">
  </form> 
  <div id='content'></div>
</body>
</html>

<script>  
$(document).ready(function(){ 
$('#assignment5').submit(function(e){
  e.preventDefault(); 
  $('#content').html( $(':input[name=html]').val() );
  $('head').append( '<style>' + $(':input[name=css]').val() + '</style>' ); 
}); 
}); 
</script>

Answer 1

是的，有可能......

首先，你必须创建一个元素来监听这个目的..

类似的东西（使用单独的按钮）：

<input type="button" value="Html only" id="html_only">

然后这个jQuery脚本来处理点击事件：

// this will just output the html ignoring the css textarea
$('#html_only').click(function(e){
  $('#content').html( $(':input[name=html]').val() ); 
});

或这种方式（使用一个像开关一样的复选框）：

<input type="checkbox" name="css_switch" id="css_switch"/> apply CSS?

并将您的脚本更改为：

$('#assignment5').submit(function(e){
  e.preventDefault(); 
    if($("#css_switch").is(":checked")){
       // output from html textarea only
       $('#content').html( $(':input[name=html]').val() );
    }
    else{            
       // output from html textarea and append input from css textarea
       $('#content').html( $(':input[name=html]').val() );
       $('head').append( '<style>' + $(':input[name=css]').val() + '</style>' ); 
    }
});

<强> USING button DEMO

<强> USING checkbox DEMO

自己尝试HTML和CSS程序

1 个答案: