I am trying to show a specific Paragraph when a specific div is clicked upon. I cannot get the jQuery to function the way I would like it to.
I want that if the ".Virus" div is clicked on, it shows the contents "v", if ".screenRepair" div is clicked on then it shows the ".screenInfo" contents
Any help would be appreciated.
HTML:
<div class="outerService">
<div class="service">
<div class="virus" style="width: 230px; height: 208px;">
<center>
<h3 style="width:200px; text-align:center">Computer Virus</h3>
<img src="images/Services/virus.jpg" alt="virus" height="140px"/>
</center>
</div>
<div class="information">
<p class="v">This is information</p>
<p class="screenInfo">hello</p>
</div>
<div class="screenRepair" style="width: 230px;">
<center>
<h3 style="width:auto; text-align:center">Screen Replacement</h3>
<img src="images/Services/smashedScreen.jpg" alt="BrokenScreen" height="140px"/>
</center>
</div>
</div>
</div>
CSS:
.outerService {
width: 90%;
margin-left: auto;
margin-right: auto;
height: auto;
border: 1px solid blue;
}
.service {
display: table;
height: auto;
max-width: 1044px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
border: 1px solid red;
}
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
}
#vInfo {
float: none;
width: 50%;
text-align: justify;
border: 1px solid #000;
display: none;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
.information p {
text-align: justify;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
jQuery
$(document).ready(function () {
$(".virus").click(function () {
$(".information .v").show();
});
});
With your current CSS you can try something like this:
$(document).ready(function() {
var $info = $( '.information' );
$(".virus").click(function() {
$info.show().find( 'p:not(.v)' ).hide().siblings().show();
});
$(".screenRepair").click(function() {
$info.show().find( 'p:not(.screenInfo)' ).hide().siblings().show();
});
});
Or you can slightly change your CSS and try to hide every P within .information instead of hiding .information itself.
Hope this helps.
change information div properties in your css (remove display:none)
.information {
margin-left: 10px;
border:3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
}
and add this lines to your css
.information .v {
display:none;
}
.screenInfo{
display: none;
}
Use Toggle if you want to show and hide div
Try something like this:
jQuery(document).ready(function(){
jQuery('#virus').live('click', function(event) {
jQuery('#information').toggle('show');
});
});
its working here is the JS Fiddle
$(document).ready(function() {
$(".virus").click(function() {
$(".information").show().find('p').show().next('.screenInfo').hide();
});
$(".screenRepair").click(function() {
$(".information").show().find('p').show().prev('.v').hide();
});
});
JSFiddle
Try something like this:
$(".service img").click(function () {
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
.hasClass() returns boolean true/false.
.toggle(true) results to show the hidden object while .toggle(false) results in hiding the object.
As suggested in the comments you need to hide all the infos rather than .information div. otherwise you need to show this one before showing any other info div.
Some other edits can be done like:
.virus, .screenRepair, .hardwareRepair, .WindowsReinstall, .maintenance, .SoftwareRepair, .MemoryUpgrades, .DataRecovery {
width: 250px;
height: 208px;
float: left;
max-height: auto;
text-align: center;
margin-left: 10px;
border: 1px solid #000;
display: none; /*<-----add this to hide the info divs.*/
}
.information {
margin-left: 10px;
border: 3px solid green;
margin-top: 230px;
margin-bottom: 12px;
height: 200px;
max-width: 100%;
display: none;
}
and then you can add one more line:
$(".service img").click(function () {
$(".information").show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).closest('div').hasClass('virus'));
$(".information .screenInfo").toggle($(this).closest('div').hasClass('screenRepair'));
});
May be you want to look into this:
$(".service > div:not(.information)").click(function () {
$(".information").hide().show(); //<----show it before showing any other div.
$(".information .v").toggle($(this).hasClass('virus'));
$(".information .screenInfo").toggle($(this).hasClass('screenRepair'));
});
Try this
$(document).ready(function () {
$(".virus").click(function() {
$(".information").show();
$(".v").show();
$(".screenInfo").hide();
});
$(".screenRepair").click(function() {
$(".information").show();
$(".screenInfo").show();
$(".v").hide();
});
});
see in live
$(document).ready(function() {
$('.virus').click(function() {
$('.information').show();
$('.v').show();
});
});
.information {display:none;} .information p{display:none;}
Related
I have two consecutive divs in a HTML page
First div contains child span which is relative in position. That's why it comes over second div.
I have a click event associate with both divs.
When I click the part of the span which comes over second div, it triggers the first div's click event but I want here to trigger second div's click event.
Is there any way to achieve this.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<div onclick="div1Clicked()" id="div1">
<span>
</span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
If you don't need any hover state on the child span, you can do it like this. Keep in mind this differs a bit from your html but it can be converted to your html/css easy, I just don't have the time to do it at this moment.
What you do is add :after on the two divs with a higher z-index, that will overlay the span and work as trigger areas for you javascript. Don't mind my "strange looking css" it's BEM. You can use your javascript triggers and it will work well. You can use alert() instead of console.log() if you are not familiar with devtools in your browser of choice.
DEMO
<div class="block">
<div class="block__column block__column--left js-action-1"></div>
<div class="block__column block__column--right js-action-2"></div>
<div class="block__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, voluptas!</div>
</div>
.block {
display: flex;
position: relative;
}
.block__column {
width: 50%;
height: 20rem;
position: relative;
}
.block__column:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.block__column:hover {
cursor: pointer;
}
.block__column--left {
background-color: deepskyblue;
}
.block__column--right {
background-color: deeppink;
}
.block__description {
position: absolute;
top: 50%;
left: 2rem;
right: 2rem;
background-color: white;
}
$('.js-action-1').on('click', function() {
console.log('clicked the left column');
});
$('.js-action-2').on('click', function() {
console.log('clicked the right column');
});
<html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
Click the span element if trigger the event parent elemnet(div1) event, so does not get the correct output. But You get the output some check the condition.Please refer below snippets
function div1Clicked(){
if($("div:first").width() < event.offsetX)
div2Clicked()
else
alert('div 1 clicked');
}
As the span lies in div1, when it gets clicked, it will fire div1 click event only, even if it is overlapping the div2. So instead if you could use on click event of the green span, it might help. It will still fire div1 click event.
<html><head></head>
<body>
<div onclick="div1Clicked()" id="div1" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
">
<span style="
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
" onclick="spanClicked()">
</span>
</div>
<div onclick="div2Clicked()" id="div2" style="
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
">
<div>
</div></div>
<script>
function div1Clicked(){
alert('div 1 clicked');
}
function spanClicked(){
alert('span clicked');
}
function div2Clicked(){
alert('div 2 clicked');
}
</script>
</body></html>
If click-events on the span are not necessary, you could apply pointer-events: none to the span which will ignore clicks on the span altogether.
function div1Clicked() {
alert('div 1 clicked');
}
function div2Clicked() {
alert('div 2 clicked');
}
#div1 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inline;
float: left;
}
#div1 span {
width: 316px;
height: 30px;
background: green;
float: left;
margin-top: 39px;
position: relative;
pointer-events: none; /*This will make the span click-through*/
}
#div2 {
border: 1px solid gainsboro;
height: 100px;
width: 13%;
background: red;
display: inherit;
float: left;
}
<body>
<div onclick="div1Clicked()" id="div1">
<span></span>
</div>
<div onclick="div2Clicked()" id="div2">
<div>
</div>
</div>
You can do like below Snippet...
$('.first,.second').click(function(){
alert($(this).attr('class'))
})
.first{
width:200px;
height:300px;
background-color:red;
display:inline-block;
float:left;
position:relative;
}
span{
position:absolute;
left: 30%;
top: 30%;
}
.first:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.second:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 99;
}
.second{
width:200px;
height:300px;
background-color:green;
display:inline-block;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="first">
</div>
<div class='second'>
</div>
<span>Hello World....</span>
</body>
Here I am trying to create some new Divs. When I press the save button, it fetch the data from text area and create a new div in top of the Add Button. That works Perfectly. Then I create some more divs, the Add Button reach the bottom of the page. And My need is, the Add Button should stop when it reaches the bottom of the page. I don't want to scroll my page. I just need the Created divs should scroll. Not the whole page. Please give some advise. Thank You.
$('.add-list-button').on('click', function() {
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
});
$('.save-list').on('click', function() {
var listName = $('.list').text();
if (listName !== "") { //////////////////
$('.list').html("");
$('.add-list-button').hide();
$('.list-create').show();
document.getElementById("SAVE_LIST").focus();
createNewList(listName);
}
});
$('.close-list').on('click', function() {
$('.list-create').hide();
$('.add-list-button').show();
$('.list').html(""); ////////////////////////////////
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div class="add-list-button">
<b> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
<div style="width: 250px; height: 35px; margin-top: 5px;">
<input class="save-list" type="button" value="Save" style="cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;">
<img class="close-list" src="public/media/images/icons/cls.png" width="27" height="27" style="cursor: pointer; margin-top: 3px; margin-left: 5px;">
</div>
</div>
</div>
Give a container class to your list items like this;
<div class="listcontainer">
//items
</div>
With a little bit styling, the container should scroll whenever the content size exceeds its size.
.listcontainer{height:200px;display:block}
change your jquery like this
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 80) {
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 81) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
});
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width:50%;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="create-list" id=L IST style="display: inline-block; width: 250px; background-color: #e2e4e6; border-radius: 3px; margin-left: 10px; margin-top: 40px; ">
<div id="nav_bar" class="add-list-button">
<b style="color:white;"> Add </b>
</div>
<div class="list-create" style="display: none; min-height: 80px; border-radius: 3px; background-color: #e2e4e6; ">
<div class="list" id="SAVE_LIST" style="white-space: normal;word-break: break-all; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable="true" data-placeholder="Add"></div>
html
<div id="speech"></div>
<div id="test"></div>
<div id="testt"></div>
css
/*speech bubble*/
.bubble {
position: relative;
width: auto;
height: 40px;
padding-left: 10px;
padding-right: 10px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-family: sans-serif;
font-size: 15px;
display: inline-block;
left: 17px;
vertical-align: middle;
line-height: 40px;
max-width: 240px;
float: left;
clear: both;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -10px;
top: 10px;
}
#test, #testt {
height: 100px;
width: 100px;
}
#speech {
height: 500px;
width: 200px;
float: right;
overflow-y: scroll;
background-color: #000;
}
javascript
$(document).ready(function () {
"use strict";
$("#test").click(function () {
$("#speech").append('<p class="bubble">test223123</p>');
});
$("#testt").click(function () {
$("#speech").append('<p class="bubble">test</p>');
});
});
When I click on "test" a few times, the speech bubbles that are appended into the speech div continues to go downwards but the scroll thing stays at the top.
How do i make it such that the scroll bar goes to the bottom whenever new speech bubbles are added?
Very simple, just use the scrollTop function. Add this single line:
$('#speech').scrollTop($('#speech').height());
You're now simply appending your bubble. When the bubble is appended, you find the height of your div and you use this value to scroll down.
I have made a little codepen where you can view all the code.
do not use height, but scrollHeight
$(document).ready(function () {
"use strict";
$("#test").click(function () {
$("#speech").append('<p class="bubble">test223123</p>').scrollTop($("#speech").prop("scrollHeight"));
});
$("#testt").click(function () {
$("#speech").append('<p class="bubble">test</p>').scrollTop($("#speech").prop("scrollHeight"));
});
});
So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>
Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx
The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.
Can some please, PLEASE! help me with this problem. Okay so I have a code that at first I thought worked well but I forgot that when the default <img src="test-img-1.jpg" class="actual-img"> content is loaded the first of the three buttons below the image should take the active css state that I've specified for the active buttons to take. Now what I want is for this little code to behave like a normal slider by loading in the css hidden contents into the ".image-area" div and it works when I click on the buttons. Problems only surface when I am I trying to give the first loaded content an active state. One way I believe can fix this (I can't implement it) is to let the first immediate default content be this inline hidden div: (
<div id="image-area2">
<div class="img-area-wrapper">
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>) while somehow letting the first button be set to active. I should also mention that I'm not the best with jquery. Please help me fix this someone!
Here is a fiddle to get a better understanding: http://jsfiddle.net/pyrot/84sU4/
If my way of going about this is totally absurd please let me know.
this is my code:
<script type="text/javascript">
$(document).ready(function() {
//loads default content
//$('#image-area').load($('.menu_top a:first-child').attr('href'));
$('.o-links').click(function() {
// href has to be the id of the hidden content element
var href = $(this).attr('href');
$('#image-area').fadeOut(1000, function() {
$(this).html($('#' + href).html()).fadeIn(1000);
});
return false;
});
});
$(function() {
$('.o-links').click(function(e) {
//e.preventDefault();
$('.o-links').not(this).removeClass('O_Nav_Current');
$(this).addClass('O_Nav_Current');
});
});
</script>
this is my html:
<section id="image-slider-container">
<div class="image-slider-inner">
<div id="image-area">
<div class="img-area-wrapper">
<!--currently this is the default I want to change-->
<img src="test-img-1.jpg" class="actual-img">
</div>
</div>
<div id="image-area2">
<div class="img-area-wrapper">
<!--I would like this to be the default content that when
seen the first button is set to active-->
<img src="test-img-2.jpg" class="actual-img">
</div>
</div>
<div id="image-area3">
<div class="img-area-wrapper">
<img src="test-img-3.jpg" class="actual-img">
</div>
</div>
<div class="slider-buttons">
<div class="slider-buttons-container">
</div>
</div>
</div>
</section>
and this is my css:
#image-slider-container {
width: 100%;
height: auto;
background-color: #ffffff;
padding: 5% 0px 0% 0px;
}
.image-slider-inner {
width: 100%;
height: auto;
max-width: 1040px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
}
#image-area2,
#image-area3 {
width: 100%;
height: auto;
display: none;
}
#image-area {
width: 100%;
height: auto;
}
#image-area .img-area-wrapper {
width: 80%;
height: auto;
max-width: 1140px;
margin: 0px auto;
}
.actual-img {
width: 100%;
height: 100%;
}
.slider-buttons {
width: 100%;
height: auto;
max-width: 1140px;
margin-top: 0px;
}
.slider-buttons-container {
width: 100%;
height: auto;
max-width: 1140px;
margin: 10px auto 0px auto;
text-align: center;
}
.slider-buttons-container a {
border-radius: 360px;
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
background-color: #efefef;
outline: 0px;
text-decoration: none;
font-size: 12px;
box-shadow: -2px 1px 2px 0px #ADADAD;
transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
}
.slider-buttons-container a:hover {
border: 1px #C5C5C5 solid;
padding: 0px 5px 0px 5px;
background-color: #DAD8D8
}
.slider-buttons-container a:active {
position: relative;
top: 2px;
}
.O_Nav_Current {
border: 1px #999999 solid !important;
background-color: #DAD8D8 !important;
}
Problems only surface when I am I trying to give the first loaded content an active state
Does this mean that you want to add a class to the first button?
$('.o-links').click(function(e) {
// ...
}).first().addClass('O_Nav_Current');
instead of using IDs for the slider's items and resetting html contents you can use classes and indexes:
CSS:
.image-area {
width: 100%;
height: auto;
display: none;
}
.image-area:first-of-type {
display: block;
}
JavaScript:
var $slides = $('.image-area'),
$btns = $('a.o-links');
$btns.on('click', function (e) {
var i = $btns.removeClass('O_Nav_Current').index(this);
$(this).addClass('O_Nav_Current');
$slides.filter(':visible').fadeOut(1000, function () {
$slides.eq(i).fadeIn(1000);
});
e.preventDefault();
}).first().addClass('O_Nav_Current');
http://jsfiddle.net/RmF57/