问题：

Javascript跳转系统

东云

2023-03-14

null

var editor;
window.addEventListener('load',function () {

var textarea = document.getElementById("editor");
editor = CodeMirror.fromTextArea(textarea, {
  lineNumbers: true,
  mode: "htmlmixed",
  tabSize: 3,
  value: 'console.log("Hello, World");',
  theme: 'monokai',
});
})
window.addEventListener('load',function () {
    
$(document).ready(function() {
  $('#tab1').css('background-color', '#272822');
  var active = 'tab1';
  var html_code = '//Html code goes here';
  var css_code = '//Css code goes here';
  var js_code = '//Js code goes here';
  $("#tab1").trigger('click');
  //Tab system
  $('.tab').click(function() {
    var currentvalue = editor.getValue();
    if (currentvalue != "") {
      if (active == "tab1") {
        html_code = currentvalue;
      } else if (active == "tab2") {
        css_code = currentvalue;
      } else if (active == "tab3") {
        js_code = currentvalue;
      }
    }

    active = $(this).attr("id");
    if (active == "tab1") {
      editor.setValue(html_code);
    } else if (active == "tab2") {
      editor.setValue(css_code);
    } else if (active == "tab3") {
      editor.setValue(js_code);
    }
    $('.tab').css('background-color', '#352a2aa9');
    $(this).css('background-color', '#272822');
  })

  $('.compile').click(function () {
      alert(html_code + js_code + css_code);
  })
})
})

.tabs {
    margin-top: 1%;
    background-color: #fff;
    display: flex;
}

.tab {
    padding-left: 20px;
    width: 20%;
    background-color: #352a2aa9;
    color: white;
    margin-right: 10px;
    border-radius: 5px 5px 0 0;
}

.tab:hover {
    cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/monokai.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.55.0/addon/hint/show-hint.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="code-editor">
            <div class="tabs">
                <div class="tab" id="tab1">
                    index.html
                </div>
                <div class="tab" id="tab2">
                    index.css
                </div>
                <div class="tab" id="tab3">
                    index.js
                </div>
            </div>
            <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
        </div>
        <button class="compile">submit</button>

null

我在为我的代码编辑器做一个标签系统。例如，我有3个选项卡，HTML选项卡，CSS选项卡和一个javascript选项卡。问题是，当我再次尝试切换选项卡时，HTML获得CSS选项卡值，js选项卡也获得CSS值。下面是我的代码:

 $( document ).ready(function(){
        $('#tab1').css('background-color','#272822');
        var active = 'tab1';
        var html_code = '//Html code goes here';
        var css_code = '//Css code goes here';
        var js_code = '//Js code goes here';
        check_tab();
        $("#tab1").trigger('click');
        //Tab system
        $('.tab').click(function(){
            $('.tab').css('background-color','#352a2aa9');
            $(this).css('background-color','#272822');
            $(this).css('color','white');

            if (this.id == 'tab2' && active == 'tab1') {
                html_code = editor.getValue();
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
                           
            } 
            if (this.id == 'tab3' && active == 'tab2') {
                css_code = editor.getValue();
                if(js_code !== undefined){
                    active = 'tab3';
                    editor.setValue(js_code);
                } 
            }     
            if (this.id == 'tab2' && active == 'tab3') {
                js_code = editor.getValue();
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
            }  
            if (this.id == 'tab1' && active == 'tab3') {
                js_code = editor.getValue();
                if(html_code !== undefined){
                    active = 'tab1';
                    editor.setValue(html_code);
                }
            }  

            if (this.id == 'tab1' && active == 'tab2') {
                css_code = editor.getValue();
                if(html_code !== undefined){
                    active = 'tab1';
                    editor.setValue(html_code);
                }
            }

            if (this.id == 'tab2' && active == 'tab1') {
                if(css_code !== undefined){
                    active = 'tab2';
                    editor.setValue(css_code);
                }
            }
            if (this.id == 'tab3' && active == 'tab1') {
                html_code = editor.getValue();
                if(js_code !== undefined){
                    active = 'tab3';
                    editor.setValue(js_code);
                }
            }
            check_tab();
        })

        function check_tab(){
            if(active == 'tab1'){
                editor.on('change',function (editor) {
                    html_code = editor.getValue();
                })
            }
            if(active == 'tab2'){
                editor.on('change',function (editor) {
                    css_code = editor.getValue();
                })
            }
            if(active == 'tab3'){
                editor.on('change',function (editor) {
                    js_code = editor.getValue();
                })
            }
        }

我正在使用CodeMirror来显示代码编辑器。我将添加代码，如果问题是缺乏信息。提前谢谢！ HTML代码:

<div class="code-editor">
            <div class="tabs">
                <div class="tab" id="tab1">
                    index.html
                </div>
                <div class="tab" id="tab2">
                    index.css
                </div>
                <div class="tab" id="tab3">
                    index.js
                </div>
            </div>
            <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
        </div>

问题是当我单击submit按钮时，它会带来变量的旧值，只有当我切换选项卡时，它才会改变变量值。

共有1个答案

王刚毅

2023-03-14

我把它做得更简单了一点，但是它可以改进得更多，但是我想让你了解下面的演示中的变化。

演示

null

$(document).ready(function() {

  var editor;
  var textarea = document.getElementById("editor");
  editor = CodeMirror.fromTextArea(textarea, {
    lineNumbers: true,
    mode: "htmlmixed"
  });

  $('#tab1').css('background-color', '#272822');
  var active = 'tab1';
  var html_code = '//Html code goes here';
  var css_code = '//Css code goes here';
  var js_code = '//Js code goes here';
  //Tab system
  $('.tab').click(function() {
    var currentvalue = editor.getValue();
    if (currentvalue != "") {
      if (active == "tab1") {
        html_code = currentvalue;
      } else if (active == "tab2") {
        css_code = currentvalue;
      } else if (active == "tab3") {
        js_code = currentvalue;
      }
    } else {
      editor.setValue(html_code)
    }

    active = $(this).attr("id");
    if (active == "tab1") {
      editor.setValue(html_code);
    } else if (active == "tab2") {
      editor.setValue(css_code);
    } else if (active == "tab3") {
      editor.setValue(js_code);
    }
    $('.tab').css('background-color', '#fff');
    $(this).css('background-color', '#272822');
  })
  
  $("#tab1").trigger('click');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet" />


<div class="code-editor">
  <div class="tabs">
    <div class="tab" id="tab1">
      index.html
    </div>
    <div class="tab" id="tab2">
      index.css
    </div>
    <div class="tab" id="tab3">
      index.js
    </div>
  </div>
  <textarea name="editor" id="editor" cols="30" rows="10"></textarea>
</div>

类似资料：

跳转

navigateToMiniProgram 基础库1.3.9开始支持，iOS版本2.1.23，Android版本2.1.38 navigateToMiniProgram(Object object) 打开另一个小程序参数 Object object 属性类型默认值必填说明 appId string 是要打开的小程序 appId path string 否打开的页面路径，如果为空则打开
JavaScript实现自动跳转文本功能

本文向大家介绍JavaScript实现自动跳转文本功能，包括了JavaScript实现自动跳转文本功能的使用技巧和注意事项，需要的朋友参考一下贴一段自动跳转文本的代码实现：实现代码：以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
页面跳转

页面跳转可以是打开新的一页，也可以是当前页重定向，还可以是跳转到当前页的某个状态，下面会从打开w文件，打开其它后缀文件，使用路由等几个方面分别介绍一下在X5中的页面跳转。目录 1、打开w文件 1.1、使用Shell提供的方法 1.2、使用弹出窗口打开 1.3、模拟门户的做法 2、打开html等其它类型的文件 2.1、使用打开w文件的方法 2.2、使用a链接跳转 2.3、页面重定向 2.4、使用w
页面跳转

页面跳转可以是打开新的一页，也可以是当前页重定向，还可以是跳转到当前页的某个状态，下面会从打开w文件，打开其它后缀文件，使用路由等几个方面分别介绍一下在X5中的页面跳转。目录 1、打开w文件 1.1、使用Shell提供的方法 1.2、使用弹出窗口打开 1.3、模拟门户的做法 2、打开html等其它类型的文件 2.1、使用打开w文件的方法 2.2、使用a链接跳转 2.3、页面重定向 2.4、使用w
跳过mongo capped系列

我在mongodb有一个非常大的capped系列。考虑到capped集合结构是可预测的（即，排序是预定义的，内存占用是预定义的，等等），有没有更好的方法让光标指向插入的最新项，而不是迭代？换句话说，我现在要做的是获取集合的大小（n），然后创建一个游标，将skip=n-1设置为集合的末尾。然后我在光标上迭代并处理集合中所有新添加的内容。这种方法的问题是我的收藏量很大。比如1100万张唱片。跳过需
Javascript页面跳转常见实现方式汇总

本文向大家介绍Javascript页面跳转常见实现方式汇总，包括了Javascript页面跳转常见实现方式汇总的使用技巧和注意事项，需要的朋友参考一下本文实例总结了Javascript页面跳转常见实现方式。分享给大家供大家参考，具体如下：概述相信很多Web开发者都知道，在开发Web程序的时候，对于页面之间的跳转，有很多种，但是有效的跳转则事半功倍，下面就是我在平时的开发过程中所用到的一些Ja
JavaScript跳出循环

主要内容：JS break 语句,JS continue 语句,JavaScript 标签通过前面对循环的学习我们知道，默认情况下循环会在表达式结果为假时自动退出循环，否则循环会一直持续下去。某些情况下，我们不用等待循环自动退出，可以主动退出循环，JavaScript 中提供了 break 和 continue 两个语句来实现退出循环和退出（跳过）当前循环，下面我们就来详细介绍一下。 JS break 语句在学习《 JS switch case语句》时我们已经简单了解过了 break
UITableView滚动跳转

最近，当按下新的ViewController时，我的应用程序开始进行滚动跳跃，如下所示：我尝试过不同的答案，但似乎没有任何效果。我已经了解到，我的应用程序设置负偏移到后，我设置： } 我试图找到什么是设置偏移量，我已经了解到setContentOffset它是从调用：

Javascript跳转系统

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档