CODEWITHSUNDEEP
jqueryhtml
Michael Powierski
Michael Powierski

Reputation: 1

Change contents of div with button and show the button as selected

I'm working on a page for a client and have a banner with three buttons, upon which clicked displays a different div. This is all working fine thanks to some browsing on here earlier.

There are three buttons in all and I would like it so that as and when each button is clicked to reveal a different div it will stay selected until another button is pressed to display a different div.

Below is the current working code, any pointers would be greatly appreciated!

<script>
$(document).ready(function() {
$("#buttons a").click(function() {
var id = $(this).attr("id");
$("#pages div").css("display", "none");
$("#pages div#" + id + "").css("display", "block");
});
$("#pages div:not(#1)").css("display", "none");
});
</script>


<div id="pages">
<div id="1">
    <p>Content 1</p>
</div>

<div id="2">
<p>Content 2</p>
</div>

<div id="3">
<p>Content 3</p>
</div>


<div id="buttons">
<a href="#" id="1"><img src="/img/ffb.gif" class="rollover" alt="" /></a>
<a href="#" id="2"><img src="/img/ryp.gif" class="rollover" alt="" /></a>
<a href="#" id="3"><img src="/img/ite.gif" class="rollover" alt="" /></a>
</div>

Upvotes: 0

Views: 239

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$(document).ready(function() {
    var pages = $("#pages > div").not('#buttons');
    $("#buttons a").click(function() {
        var id = $(this).attr("id");
        pages.css("display", "none");
        $("#" + id + "").css("display", "block");
    });
    pages.not(':first').css("display", "none");
});

Demo: Fiddle

Upvotes: 0

JoDev
JoDev

Reputation: 6873

Just add a class "selected" for buttons in your CSS, and add this into the jQuery function :

<script>
$(document).ready(function() {
  $("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
    //Add this lines
    $("#buttons a.selected").removeClass('selected');
    $(this).addClasss('selected');
  });
$("#pages div:not(#1)").css("display", "none");
});
</script>

[EDIT]

Are you trying to make an horizontal menu with images, and some contents under it? If yes, you can use this piece of code jsFiddle : horizontal menu...

[EDIT 2]

To make it works, you have to name selected img like this imgname_selected.gif So use this jQuery

<script>
$(document).ready(function() {
  $("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
    //Add this lines
    $("#buttons a> img[src*='_selected'").attr('src',$("#buttons a> img[src*='_selected'").attr('src').replace('_selected', ''));
    $(this).attr('src',$(this).attr('src').replace('.', '_selected.'));
  });
$("#pages div:not(#1)").css("display", "none");
});
</script>

[EDIT 3 ]

This is a working fiddle. You have of course to change the js function with the good src replacement. (something like this)

  $("#buttons a.selected").removeClass('selected');
  $(this).addClass('selected');
  $("#buttons a:not(.selected)").each(function() { 
    if( $(this).find("img").attr('src').indexOf('_selected')>0) {         
        $(this).find("img").attr('src', $(this).find("img").attr('src').replace('_selected', ''));
     }
  });
  $(this).find('img').attr('src',$(this).find('img').attr('src').replace('.', '_selected'));

Keep in mind that in this conf, you have to be sure that img names doesn't have few "."! You can adapt this as you wan't...

WARINING
In your HTML, you use same ID's for div and a... /!\ ID have to be UNIQUE in whole of the DOM!! I've changed it in the Fiddle.

MORE

Just for information, if i was in your case, I'll propably use CSS background to add images, and just add a "selected" class wich will just change the background!

Upvotes: 1

rjg132234
rjg132234

Reputation: 620

You could use radio buttons. They automatically allow only one being selected at a time.. as long as they have the same name attribute.

<input type='radio' />

Upvotes: 0

Related Questions