0

using this script i can change the text in a div on click other text..i have four different text and a Div i want to change the text in div by clicking on other four text, its working properly but the problem is that i also show previous text when i click on next link, i want to clear previous text and show only new text..Please find the attach script and HTML and then help me , and let me know for further question.

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").html("My text is changed1!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText").click(function() {
            $("#textBox").html("My text is changed!");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").html("My text is changed!2");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText3").click(function() {
            $("#textBox3").html("My text is changed!3");
        });
    });
</script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText5").click(function() {
            $("#textBox5").html("My text is changed5!");
        });
    });
</script>

and this is html

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox3" style="color:#FFF"></div>
    <div id="textBox" style="color:#FFF"></div>
    <div id="textBox1" style="color:#FFF"></div>
    <div id="textBox2" style="color:#FFF"></div>
    <div id="textBox5" style="color:#FFF"></div>
</div>
<div id="textBox4" style="color:#FFF"></div>
1
  • 2
    You are always writing into a different div. If you would write into the same one it would work just fine, since .html replaces the content. Is there a reason you write into different divs? Mar 24, 2013 at 10:13

5 Answers 5

1

You do not need to use separate script tag and $(document).ready for registering each click event. this can all be done once.

The better solution is to use one div for all tabs, but still if you want to keep all the divs, following code should help solve the issue:

<script type="text/javascript">
$(document).ready(function() {
    $("#changeText1").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox1").html("My text is changed1!");
    });

    $("#changeText").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox").html("My text is changed!");
    });

    $("#changeText2").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox2").html("My text is changed!2");
    });

    $("#changeText3").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox3").html("My text is changed!3");
    });

    $("#changeText5").click(function() {
        $('.tabs_cont div').empty();
        $("#textBox5").html("My text is changed5!");
    });
});
</script>
2
  • 1
    This will destroy any inner divs the OP will maybe add later to the first childs too. I'm not sure it's a safe solution.
    – user1467267
    Mar 24, 2013 at 10:27
  • Thanks Dear , i found the solution.. Its Perfect :)
    – Dani
    Mar 24, 2013 at 10:57
0

Try clearing the element before setting the new text:

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText2").click(function() {
            $("#textBox2").empty().html("My text is changed!2");
        });
    });
</script>
3
  • 3
    I don't think this is what the OP wants. .html already completely replaces the old content with the new content. Calling .empty beforehand is unnecessary. The outcome is the same. Mar 24, 2013 at 10:17
  • 1
    @Dani: How can this be the solution if .empty().html(...) is exactly the same as .html(...), which is what you had, and didn't work for you? Mar 24, 2013 at 11:02
  • I'm stunned too. The OP's goal was probably different than what was actually asked..
    – user1467267
    Mar 24, 2013 at 12:01
0

Try this :

<script type="text/javascript">
    $(document).ready(function() {
        $("#changeText1").click(function() {
            $("#textBox1").text("My text is changed1!");
        });
    });
</script>
3
  • 1
    How does this solve the OP's problem, which is "hiding previously inserted text"? Mar 24, 2013 at 10:18
  • use .html() to operate on containers having html elements. use .text() to modify text of elements usually having separate open and closing tags Mar 24, 2013 at 10:21
  • 1
    I agree that .text is more appropriate here, but it does not solve the problem. Mar 24, 2013 at 10:26
0

I am going to assume there is no reason you have several divs. When you state that you only want to write to one div. So the problem is that you are writing to several divs instead of just one. Correct me if this isn't what you want.

I also removed your several script tags and textboxes, as they are unneccessary - at least in this example.

Working Demo

Html:

<ul class="tabs">
    <li><a href="#" id="changeText">inclusive</a></li>
    <li><a href="#" id="changeText2">Hotel</a></li>
    <li><a href="#" id="changeText3">Car</a></li>
    <li class="end"><a href="#" id="changeText5">Cruise</a></li>
</ul>
<div class="tabs_cont">
    <div id="textBox" ></div>
</div>
<div id="textBox4" style="color:#FFF"></div>

Javascript:

$(document).ready(function() {
    $("#changeText").click(function() {
        $("#textBox").text("My text is changed!");
    });
    $("#changeText2").click(function() {
        $("#textBox").text("My text is changed!2");
    });
    $("#changeText3").click(function() {
        $("#textBox").text("My text is changed!3");
    });
    $("#changeText5").click(function() {
        $("#textBox").text("My text is changed5!");
    });
});

EDIT: Forgot to save the JSFiddle.. now that's just silly.

0

I'm not 100% sure if this is what you want. But please leave a comment and I'll update it. This is a smart-select structure, which cancels out all doublets you've made in your code.

Try to use the ready state only once, it's much cleaner:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML</title>
    <link rel="stylesheet" href="main.css" type="text/css" />
    <script src="jquery.js" type="text/javascript"></script>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
    <ul class="tabs">
        <li><a href="#" id="changeText">inclusive</a></li>
        <li><a href="#" id="changeText2">Hotel</a></li>
        <li><a href="#" id="changeText3">Car</a></li>
        <li class="end"><a href="#" id="changeText5">Cruise</a></li>
    </ul>
    <div class="tabs_cont" style="background-color: black;">
        <div id="textBox3" style="color:#FFF">3</div>
        <div id="textBox" style="color:#FFF">0</div>
        <div id="textBox1" style="color:#FFF">1</div>
        <div id="textBox2" style="color:#FFF">2</div>
        <div id="textBox5" style="color:#FFF">5</div>
    </div>
    <div id="textBox4" style="color:#FFF"></div>
</body>
</html>

main.js

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];
        var backup_html = $('.tabs_cont #textBox' + index).html();

        // These are all the textboxes you want to match
        $('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + (index == 0 ? 0 : index) + ': ' + $(this).html());
    });
});

style="background-color: black;" in the HTML was just for testing purposes :)

UPDATE

The new main.js per the OP's request:

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = 'My text has changed: ';

        switch(index) {
            case '':
                new_html += 'Text for 0';
                break;
            case '1':
                new_html += 'Text for 1';
                break;
            case '2':
                new_html += 'Text for 2';
                break;
            case '3':
                new_html += 'Text for 3';
                break;
            case '4':
                new_html += 'Text for 4';
                break;
            case '5':
                new_html += 'Text for 5';
                break;
        }

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html(new_html);
    });
});

2nd variant, with cleaner map selector

'use strict';
$(document).ready(function(){
    $('.tabs [id^="changeText"]').click(function(){
        var index = $(this).attr('id').split('changeText')[1];

        var new_html = {
            '' : 'Text for 0',
            '1' : 'Text for 1',
            '2' : 'Text for 2',
            '3' : 'Text for 3',
            '4' : 'Text for 4',
            '5' : 'Text for 5',
        };

        // These are all the textboxes you want to match
        //$('.tabs_cont [id^="textBox"]').html(''); // Empty them (or something else)

        // This HTML selector is the same as the one you clicked "changeText"
        $('.tabs_cont #textBox' + index).html('My text has changed: ' + new_html[index]);
    });
});
2
  • Dear i like the script but i seems i not basically need this, i want to write four paragraph in four button the given code was just the example can you please upgrade the script i want to to write four different paragraph in 1 div using four different links. :)
    – Dani
    Mar 24, 2013 at 10:54
  • Updated the answer Dani. Hope it's what you're looking for. Good luck!
    – user1467267
    Mar 24, 2013 at 10:59

Not the answer you're looking for? Browse other questions tagged or ask your own question.