ZuoTi.Pro
Question

I created an Html with tabs, then how do I import the constant character content of...

I created an Html with tabs, then how do I import the constant character content of a JS into one of these tabs without editing that JS file?

here is my page：

<!DOCTYPE html>

<html>

<body>

    <div id="main">

        <span class="tab">

            <button class="current">News</button>

            <button>Create</button>

            <button onclick="about()">About</button>

            <button>Login</button>

        </span>

        <div class="con" style="display: block"> For news content</div>

        <div class="con">For create content</div>

        <div class="con" id="about">For about content</div>

    </div>

</body>

<script type="text/javascript" src='strings.js'></script>

<script>

    var box = document.getElementById('main');

    var btns = document.getElementsByTagName('button');

    var divs = box.getElementsByTagName('div');

    for (var i = 0; i < btns.length; i++) {

        var btn = btns[i];

        btn.index = i;

        btn.onclick = function () {

            for (var j = 0; j < btns.length; j++) {

                btns[j].className = '';

            }

            this.className = 'current';

            for (var k = 0; k < divs.length; k++) {

                divs[k].style.display = 'none';

            }

            divs[this.index].style.display = 'block';

        }

    }

</script>

</html>

JS file is something like:
 const about = () => {document.getElementById('about').innerHTML = '<div class="about"><h1>About</h1><div>………';}
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1 
JS file is something like:
 const about = () => {document.getElementById('about').innerHTML = '<div class="about"><h1>About</h1><div>………';}


above, you have created a function named about and all you need to execute the function is call it like about()

So, if your above JS code is in strings.js, you can do something like this,
If not, then make sure you include the js file before the below script tags.
something like this:

<script type="text/javascript" src='strings.js'></script>
<script type="text/javascript" src='file.js'></script> //include the file before calling the function
<script>
</script>


In your <script> tags:

<script>
    //call the function
      about();

    var box = document.getElementById('main');

    var btns = document.getElementsByTagName('button');

    var divs = box.getElementsByTagName('div');

    for (var i = 0; i < btns.length; i++) {

        var btn = btns[i];

        btn.index = i;

        btn.onclick = function () {

            for (var j = 0; j < btns.length; j++) {

                btns[j].className = '';

            }

            this.className = 'current';

            for (var k = 0; k < divs.length; k++) {

                divs[k].style.display = 'none';

            }

            divs[this.index].style.display = 'block';

        }

    }

</script>

If you need anything specific, please feel free to let me know.

0 0
Add a comment
Know the answer?
Add Answer to:
I created an Html with tabs, then how do I import the constant character content of...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • HTML Bootstrap question: I want to use 6 bootstrap modal windows(different content) on the same Web...

    HTML Bootstrap question: I want to use 6 bootstrap modal windows(different content) on the same Web page. However, although I change the modal body, I can just see the first modal body. I want to get other content. What should I change in my code, I will put my code below. I must use the Bootstrap version 4.3.1. MODAL WINDOW くa name="button"></a> <div class-"modal fade" id-"exampleModaL" tabindex-"-1" role-"dialog" aria-labelledby-"examp LeModalLabel" aria hidden-"true" <div class-"modal-dialog" role-"document" <div class-"modal-content"> <div class-"modal-header"> h5...

  • can you do this js and html question. ill give you the html and js and...

    can you do this js and html question. ill give you the html and js and css files just fix my error use if and else like what i did dont use switch just fix my erorr. <!DOCTYPE html> <!-- Webpage HTML document for Lab 4. Authors: Amirhossein Chinaei, Andriy Pavlovych For: EECS 1012, York University, Lassonde School of Engineering --> <html lang="En"> <head> <meta charset="UTF-8"> <!-- title for web page --> <title> EECS1012: Lab 4 - Computational Thinking </title>...

  • Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script>...

    Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script> function wrangleArray() { var string1 = prompt("Enter: This class is going to fast");//Must be entered by the user var string1 = "";//Is this right? I want that string to change later by a series of prompt questions document.getElementById("div1").innerHTML = "<p>" + sentence + "</p>"; var words = sentence.split(" ");//I need to convert my string to an Array is this the way to do it?...

  • I need to complete 3 validation cases in this Javascript code. I need to validate email,...

    I need to complete 3 validation cases in this Javascript code. I need to validate email, phone and street address. How would I go about validating these 3 cases in this code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Week 10: Regular Expressions</title> <style type="text/css"> span { padding: 2px; } .success { color: #008000; background: #99cc99; } .failure { color: #ff0000; background: #ff9999; } </style> <script type="text/javascript"> function validateInput(form) { var result0 = document.getElementById('result0'), result1 = document.getElementById('result1'), result2 = document.getElementById('result2'),...

  • <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">      &n

    <html>     <head>       <title>Sign Up page</title>   <form name="validationForm" method="post" onsubmit="return checkvalidation()">         <!--div class-->       <div class="formvalidation">       <label>Your first Name</label>        <span id="showname"></span>        <!--label for firstname-->       <input type="text" name="firstname" class="formsignup"  id ="firstn" placeholder="Enter your Name">      <br><br>           <!--lastname-->       <label>Your last Name</label> <span id="showlname"></span>       <input type="text" name="lastname" class="formsignup" id="lastn" placeholder="Enter your last Name">       <br><br>        <!--email-->         <label>Your Email</label>          <span id="showemail"></span>         <input type="email" name="emailid" class="formsignup" size="45" id="emailn" placeholder="Enter your Email">        <br><br> <input type="submit" value="send">     </div>           </form> <script>      function checkvalidation(){     var name = document.forms["validationForm"]["firstname"].value;     var lname...

  • Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of...

    Need Help correcting last function runHanoi(A,C,B) so this program correctly calculates number of moves made. Solving the Hanoi tower. Please post correct Javascript. This is used in jsfiddle. HTML: html> <schript src="TowerOfHanoi.js"</script> </script> <h1> Tower of Hanoi </h1> Enter the number of disks (Disk amount must be < 7): <br> <br> <input id = 'uInput' type = 'textbox' size = 10 > <button id = 'setup' onClick = 'insertDisks()'> Set up Tower of Hanoi </button> <button id=calc onClick = 'runHanoi(stackA,...

  • HTML Canvas: I have given my small html + js mix code below. By this program-...

    HTML Canvas: I have given my small html + js mix code below. By this program- I can just draw line, but after drawing any image I want to save the "image " on my desktop. I understand, I have to make a "button" to SAVE it and later if I want to load the picture, then I have to make a button on the webpage to "LOAD". But I am unable to understand the function I should write for...

  • How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en">...

    How can I connect the html forms to php --> mysql database <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h2> <center> Average: </h2> <h3> <center> Rate the following: </h2> <h3> <center> Rating Criteria: <br> Developing (0-5), Competent (6-10), Accomplished (10-15); </h3> <center> Judge Name: <input type="text" id="judge"> <br> <br> <center> 1. Articulate requirements and design of the project: <input type="text" id="num1"> <br> <br> 2. Plan the solution and implement the project: <input type="text" id="num2"> <br> <br> 3....

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
Active Questions
ADVERTISEMENT