We Keep Coding

Tab function to improve.

I have this script that I need to run a tab (jquery). Mainly I need to hide some div and add class (you sure have understood).
How should it be written in a more elegant and readable?
function fun1(){
$('#tab1 a').addClass('selected');
$('#tab2 a').removeClass('selected');
$('#tab3 a').removeClass('selected');
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
}
function fun2(){
$('#tab1 a').removeClass('selected');
$('#tab2 a').addClass('selected');
$('#tab3 a').removeClass('selected');
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='block';
document.getElementById('div3').style.display='none';
}
function fun3(){
$('#tab1 a').removeClass('selected');
$('#tab2 a').removeClass('selected');
$('#tab3 a').addClass('selected');
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='block';
}
window.onload = function() {
document.getElementById('tab1').onclick=fun1;
document.getElementById('tab2').onclick=fun2;
document.getElementById('tab3').onclick=fun3;
document.getElementById('div1').style.display='block';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
}

You should avoid repeating your code. How about a single function that will take care of everything:
function tab(id){
$('#tab1').parent().children().removeClass('selected'); // remove selected class from all tabs
$('#tab' + id).addClass('selected'); // add just to one we need
$('#div1').parent().children().hide(); // hide all the #div elements
$('#div' + id).show(); // show the one we need
}
Notes for the changes I made:
selected class is now applied to #tab elements, not the anchors inside them
I assumed all the #tabs and #divs are the only siblings within their containers
to change the active tab, just call tab(1), tab(2), etc...
Here's a simple example with my approach: http://jsfiddle.net/CkpwT/1/

You could try something like this:
var tabs, divs;
function handler(n) {
return function fun() {
for(var i=0, l=tabs.length; i<l; ++i)
tabs[i].find('a').toggleClass('selected', n==i);
for(var i=0, l=divs.length; i<l; ++i)
divs[i].toggle(n==i);
};
}
window.onload = function() {
tabs = [$('#tab1'), $('#tab2'), $('#tab3')];
divs = [$('#div1'), $('#div2'), $('#div3')];
for(var i=0, l=tabs.length; i<l; ++i)
tabs[i].on('click', handler(i));
tabs[0].click();
}
Demo

So, you have a tab for every page. And on click you want to also add a 'selected' class to the clicked element.
PLAYGROUND
All you need is basically this simple HTML markup:
<ul id="tabs">
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
<div id="divs">
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
</div>
than you can simply get the index value of the clicked tab and open the same indexed DIV element:
$tabs = $('#tabs a'); // Cache your selectors
$divs = $('#divs > div');
$tabs.click(function(e) {
e.preventDefault(); // prevent browser from following anchor href
$tabs.removeClass('active');
$(this).addClass('active');
$divs.hide().eq( $tabs.index(this) ).show(); // Get the Tab element index and refer to the DIV using .eq()
}).eq(0).click(); // Trigger the initial click on a desired tab index(0)

.addClass to element adds a styling then removes, how do I fix

I have a code
var prev;
function addClass( classname, element ) {
prev = cn;
var cn = document.getElementById(element);
$(cn).addClass("selected");
}
The element in the dom look like this:
<div class="arrowgreen">
<ul>
<li>Manager</li>
<li>Planner</li>
<li>Administrator</li>
</ul>
</div>
For 'arrowgreen' I have a styling which changes the li styling on rollover and click.
When an element is clicked on, I want to apply the 'selected' classname to the element.
It does this for a split second and then reverts back.
The css looks like
.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;
}

Working jsFiddle Demo
In usage of $ in your code, I see that you are using jQuery.
There is no need to set onclick internally.
Let's jQuery handle it for you:
// wait for dom ready
$(function () {
// when user clicks on elements
$('.arrowgreen li a').on('click', function (e) {
// prevent default the behaviour of link
e.preventDefault();
// remove old `selected` classes from elements
$('.arrowgreen li a').removeClass('selected');
// add class `selected` to current element
$(this).addClass('selected');
});
});

Working JSFiddle
There was an error in your HTML, a " that opened a new string after onclick.
var prev;
function addClass(classname, element) {
var cn = document.getElementById(element);
prev = cn; //does nothing useful really
$(cn).addClass("selected");
}
<div class="arrowgreen">
<ul>
<li>Manager
</li>
<li>Planner
</li>
<li>Administrator
</li>
</ul>
</div>
Remember to include jQuery in your page!
There is a way to do this without jQuery anyway:
function addClass(classname, element) {
var cn = document.getElementById(element);
prev = cn; //does nothing useful really
cn.className += " " + classname;
}

Similar way to do it:
(function ($) {
$('.arrowgreen > ul > li > a').on('click', function (e) {
e.preventDefault();
$(this).addClass('selected').siblings().removeClass('selected');
});
}(jQuery));

Javascript, switching images through both mouseover and click

I have some buttons( "ul.subjects li" ) and...
1. change buttons' background-images through mouseover actions
2. can be clicked one button at once.
　So once clicked a button, others are cancelled.
I have two this button lists and switch contents by clicked items(subjects and ages).
I can switch background-images by changing "class" of (class="mat" to class="mat_c").
$(function(){
$(document).delegate("ul.subjects li a", "mouseover", function(){
$(this).data("imgc", $(this).attr("class"));
var regex = /_s/;
if (regex.test($(this).data("imgc")) == false ) {
$(this).attr("class", $(this).data("imgc")+"_c")
}
});
$(document).delegate("ul.subjects li a", "mouseout", function(){
$(this).attr("class", $(this).attr("class").replace(/_c/, ""));
});
});
<ul class="subjects">
<li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学</li>
<li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
<li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
<li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>
While button-click action doesn't work right, trying to change attribute into class="..._s",
but immediately changed into class="..._c".
$(function(){
$(document).delegate("ul.subjects li a", "click", function(){
$("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
$(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
});
});
Maybe I should control the events or order of them...
and there should be more simple ways to do this. How should I figure this out?
As you can see it on http://jsfiddle.net/MsdGS/1/,
After you click the under list , mouseover action doesn't work right.
Clicked buttons' "class" should be changed to "..._s",
(class="mat" to class="mat_s")
but "..._s" immediately changed to "..._c".
Thanks,

The result (i've removed the href in the bottom ul list)
If i have understood your question correct this is what you need to change:
$(function(){
$("#course_tb").load("/age=all/sub=all/"+"#course_tb");
$(document).delegate("ul.subjects li a", "click", function(){
// iterate through `subjects`'s "a"
$("ul.subjects li a").each(function(index, el){
$(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
});
//html($("ul.subjects").html().replace(/_s/g, ""));
// ...
return false;
} );
} );

Try to use hover to implement mouseover and mouseout, like
$("ul.subjects li a").hover(function() {
$(this).css("background-image", "www.google.com");
}, function() {
$(this).css("background-image", "www.google.com");
});
As you can see, just try to use css:background-image to directly change the background image. This would bypass your problem.
Hope this works for you.
.hover() API

returning clicked li class in an ul javascript/jquery

My code (the html page):
<nav>
<ul>
<li id="homeLink">Home</li>
<li id="rekenLink">Rekenmachine</li>
<li id="bakkerLink">Parkeergarage</li>
<li id="garageLink">Bij de bakker</li>
<ul>
</nav>
The javascript/jquery behind it:
$(function () {
$("ul").click(function () {
// here I want to get the clicked id of the li (e.g. bakkerLink)
});
});
How do I do that?

Use the .on() method with signature $(common_parent).on(event_name, filter_selector, event_listener).
Demo: http://jsfiddle.net/gLhbA/
$(function() {
$("ul").on("click", "li", function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});
Another method is to bind the event to li instead of ul:
$(function() {
$("li").click(function() {
// here I want to get the clicked id of the li (e.g. bakkerLink)
var id = this.id;
alert(id);
});
});

Use jQuery on() instead of click and pass li as selector.
$(function() {
$("ul").on('click', 'li', function() {
//Here this will point to the li element being clicked
alert(this.id);
});
});
on() reference - http://api.jquery.com/on/

$(function() {
$("li").click(function() {
alert(this.id);
});
});
edit: jsfiddle link

Handle the click event of the <li> instead of the <ul>.
You can then get this.id.

Use the event's target (The anchor that was clicked) and then grab its parent's id:
$(function() {
$("ul").click(function(e) {
alert(e.target.parentNode.id);
});
});
JSFiddle

here is one of the way to do. Make sure your using the latest jquery file.
$("ul li").on('click', function() {
console.log($(this).attr("id"));
});

You may try
$(function () {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});
or
$(document).ready( function() {
$("li").click(function () {
var id = $(this).attr("id");
alert(id);
});
});

Adding a click event inside jquery plugin while maintain access to main jquery object

In the below code I have a couple of unordered lists, and in the plugin I am attempting to fire a click event when the li element is clicked. How can I do this inside the plugin and still have access to the main ul jquery object?
See comments in code for further explanation
<ul class="testing">
<li>clicking this should fire a click event</li>
</ul>
<ul class="testing">
<li>clicking this should fire a click event</li>
</ul>
(function($) {
$.fn.myPlugin = function(options) {
return this.each(function() {
//how should I trigger the onClick when the li is clicked???
});
function onClick(){
console.log('you clicked an li');
//I also need access to the main ul element inside here
}
}
})(jQuery);
$(function() {
$('.testing').myPlugin();
});

(function($) {
$.fn.myPlugin = function(options) {
return this.find('li').click(onClick)
function onClick(){
console.log('you clicked an li');
$(this).parent(); // This is the <ul>
}
}
})(jQuery);
$(".testing").myPlugin()

Copy the following example and see if this helps solidify what you are attempting to accomplish.
The proof of getting to the main ul tags are the alerts. You will see I have created 'testing1' and 'testing2' classes. Depending on which li tag is clicked, the user will receive an alert of what class is associated to the parent ul tag of the clicked li tag.
I hope this helps!
<ul class="testing1">
<li>clicking this should fire a click event</li>
</ul>
<ul class="testing2">
<li>clicking this should fire a click event</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('ul')
.on('click', 'li', function() {
$(this).myPlugin();
});
});
$.fn.myPlugin = function(options) {
return this.each(function() {
//how should I trigger the onClick when the li is clicked???
onClick(this);
});
function onClick(jqObj) {
console.log('you clicked an li');
//I also need access to the main ul element inside here
alert($(jqObj).parent('ul').attr('class'));
}
}
</script>