我认为您正在寻找这样的功能:为此，请使用以下代码:

I Think you are looking for the functionality like this : For This Use Following Code :

jquery代码:

<script>
$x = jQuery.noConflict();
$x(function() {
    var _alphabets = $x('.alphabet > a');
    var _contentRows = $x('#countries-table tbody tr');

    _alphabets.click(function() {
        var _letter = $x(this), _text = $x(this).text(), _count = 0;

        _alphabets.removeClass("active");
        _letter.addClass("active");

        _contentRows.hide();
        _contentRows.each(function(i) {
            var _cellText = $x(this).children('td').eq(0).text();
            if (RegExp('^' + _text).test(_cellText)) {
                _count += 1;
                $x(this).fadeIn(400);
            }
        });
    });
});
</script>

phtml代码:

<?php $innerhtml = "";
$_helper = Mage::helper('catalog/category') ?>
<?php $_categories = $_helper->getStoreCategories() ?>
<?php $currentCategory = Mage::registry('current_category') ?>
<?php if (count($_categories) > 0): ?>
<?php foreach ($_categories as $_category): 
$innerhtml.="<tr><td><a href=".$_helper->getCategoryUrl($_category).">".$_category->getName()."</a></td></tr>"; ?>
    <?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
    <?php $_subcategories = $_category->getChildrenCategories() ?>
    <?php if (count($_subcategories) > 0): ?>
        <?php foreach ($_subcategories as $_subcategory): 
            $innerhtml.="<tr><td><a href=".$_helper->getCategoryUrl($_subcategory).">".$_subcategory->getName()."</a></td></tr>"; ?>
        <?php endforeach; ?>
    <?php endif; ?>
<?php endforeach; ?>   
<?php endif; ?> 
<h1>Product Categories</h1>
<div class="alphabet" style="">
<a class="first" href="#">A</a>
<a href="#">B</a>
<a href="#">C</a>
<a href="#">D</a>
<a href="#">E</a>
<a href="#">F</a>
<a href="#">G</a>
<a href="#">H</a>
<a href="#">I</a>
<a href="#">J</a>
<a href="#">K</a>
<a href="#">L</a>
<a href="#">M</a>
<a href="#">N</a>
<a href="#">O</a>
<a href="#">P</a>
<a href="#">Q</a>
<a href="#">R</a>
<a href="#">S</a>
<a href="#">T</a>
<a href="#">U</a>
<a href="#">V</a>
<a href="#">W</a>
<a href="#">X</a>
<a href="#">Y</a>
<a class="last" href="#">Z</a>
</div>
<div id="conutries">
<table id="countries-table">
<thead><tr><th>Category Name</th></tr></thead>
<tbody>
    <?php echo $innerhtml; ?>
    </tbody>
</table>
</div>

样式表为:

#conutries
{
    width: 650px;
    background: white;
}
#countries-table
{
    border-spacing: 2px;
}
.alphabet
{
    margin: 0 0 10px;
    overflow: hidden;
}
.alphabet a, #countries-table tr
{
    transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out;
}
.alphabet a
{
    width: 20px;
    float: left;
    color: #333;
    cursor: pointer;
    height: 20px;
    border: 1px solid #CCC;
    display: block;
    padding: 2px 2px;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
    border-right: none;
    text-decoration: none;
    background-color: #F1F1F1;
}
.alphabet a.first
{
    border-radius: 3px 0 0 3px;
}
.alphabet a.last
{
    border-right: 1px solid silver;
    border-radius: 0 3px 3px 0;
}
.alphabet a:hover,
.alphabet a.active
{
    background: #FBF8E9;
    font-weight: bold;
}