first lets take a look at the HTML
also for the round corners i would suggest the jquery.corner plugin which helps me a lot

<style type="text/css">
* {
margin:0;
padding:0;
}
#list {
background-color:#999;
}
#list div {
display:inline-block;
}
#alphabets li {
list-style-type:none;
margin: 2px 0;
padding:2px;
}
.contents {
padding:2px;
}
</style>

<div id="list"> <!-- wrapper -->

<div>
<ul id="alphabets">
<li><a href="A"></li>
<li><a href="B"></li>
<li><a href="C"></li>
</ul>
</div>
<div>
<div class="contents">
Dodge<br />
</div>
<div class="contents">
Ford<br />
</div>
<div class="contents">
Geo<br />
GMC<br />
</div>

</div>

now we focus on the script :)

<script type="text/javascript">

$(function() {
// create a reference point
var obj = $("#list");
// create reference to your click-able options
var headings = $("#alphabets li", obj);
// create reference points for content for each options
var contents = $("div.contents", obj);
// declare the initial state
var index = 0;
// hide all contents
contents.hide();
// show initial content
contents.eq(index).show();
// add active class
headings.eq(index).addClass("active");
// click event
headings.click(function(e) {
// prevent default hyperlink behavior
e.preventDefault();
// get the current list item clicked
var current = headings.index($(this));
//  do transition only if the selected list item is not clicked
if(index != current) {
// hide old
contents.eq(index).hide();
// remove old active
headings.eq(index).removeClass("active");
// add new active
headings.eq(current).addClass("active");
// show new
contents.eq(current).show();
// reset index
index = current;
}
});
});

sorry if i have syntax errors i scripted this in like 5 minutes. kinda in a hurry

</script>