javascript - Simple onclick menu show next tab -

javascript - Simple onclick menu show next tab -

i have menu on left hand side , want when person clicks on it, active button movies next button. menu using bootstrap:

<div class="list-group"> <a href="#test1" data-target="test1"class="list-group-item active">score</a> <a href="#test2" data-target="test2" class="list-group-item">policy</a> </div>

this display text, text come database:

<div id="score" class="sometext tab-pane active"></div> <div id="policy" class="sometext tab-pane active"></div>

this function gets data;

function methodname() { $.ajax({ type: "post", url: "@url.action("methodname", "controllername")", data: json.stringify(), contenttype: "application/json; charset=utf-8", success: function (data) { (var d in data) { $('#score').html(data[d].score); } } }); }

how create when user click on score button jquery function id $('#test1').html(data.score); show , when click policy button $('#test2').html(data.policy); info should come up. onclick policy button active button should move score button policy button. know confusing nice see how can done.

you can seek this:

put function in global scope:

function methodname(elem) { $.ajax({ type: "post", url: "@url.action("methodname", "controllername")", data: json.stringify(), context:elem, // set context here contenttype: "application/json; charset=utf-8", success: function (data) { if($(elem).prop('href') === "#test1"){ // if #test1 place data.score $(elem).html(data.score); } else if($(elem).prop('href') === "#test2"){ // if "#test2" place data.policy $(elem).html(data.policy); } } }); }

then can this:

$(function(){ $('.list-group a').on('click', function (e) { e.preventdefault(); $('.active').removeclass('active'); // removes active class $(this).addclass('active'); // adds active class clicked elem methodname(this); // pass context in method }); }); a little demo.

javascript android jquery twitter-bootstrap