0

我试图隐藏所有页面并在用户单击时显示特定页面.glossnav a我的自定义属性page=""等于我要显示的页面的 ID。

以相关方式执行此操作的最佳方法是什么，以便我可以在其他.wordsdiv 中复制此导航功能？

我需要找到我父母的兄弟姐妹，他们id等于我的page. 我将如何构建 jQuery 来做到这一点：

$(".glossNav a").on('click', function(){

});

这是我的 HTML：

<div class="words" id="glossary-C">
    <div id="c-page-1" class="glossPage">
        <span class="glossBlock">
            <strong>Calltime</strong> - The time at which a model must be at the location and ready to work.
        </span>
        <span class="glossBlock">
            <strong>Call Back / Recall</strong> - after the first casting a callback or recall is held to narrow down the selection process. It is not unusual to get a callback before getting a job or being turned down.
        </span>
        <span class="glossBlock">
            <strong>Casting</strong> - Castings are notices of modeling jobs which are made to models, casting agencies, or on modeling websites. They show details of the types of models required for an upcoming production. This could mean a call where every model can apply or a date on which (preselected) models introduce themselves to the client, who will then make the final decision. The client sets the requirements and makes his/her choice.
        </span>
        <span class="glossBlock">
            <strong>Casting Agency</strong> - Casting agencies are agencies specialized in finding talented people for different fields like modeling, singing, acting, dancing and others. They work similarly to scouts. They search for perspective persons that could participate in different kinds of projects like TV, photo, video, advertisement casting and others. Usually the models in a casting agency don’t have an exclusive contract and can work for different agencies.
        </span>
        <span class="glossBlock">
            <strong>Casting Detail Sheet</strong> - Information sheet for the model, which contains all important information about a casting: call time, direction, client etc.
        </span>
        <span class="glossBlock">
            <strong>Catwalk/Runway</strong> - Catwalk or runway describes a narrow, usually elevated platform that runs into an auditorium, used by models to demonstrate clothing and accessories during a fashion show.
        </span>
    </div>
    <div id="c-page-2" class="glossPage">
        <span class="glossBlock">
            <strong>Close Up</strong> - In film, television or photography a close-up tightly frames a person or an object. Close-ups are one of the standard shots used regularly along with medium shots and long shots.
        </span>
        <span class="glossBlock">
            <strong>Composite Card</strong> - Also referred to as a comp card, sedcard, (zedcard) or model business card. A composite card is a piece of card which is printed with at least two photos of you in various poses, settings, outfits and looks (the widest variety possible). It includes your name, your contact information, usually your agency's info and all your stats. Comp cards come in lots of different formats depending on the city, agency and the type of model you are. Agencies will usually issue comp cards for you after they sign you. A composite card serves as the latest and best of a model’s portfolio and is used as a business card.
        </span>
        <span class="glossBlock">
            <strong>Copyright</strong> - Copyright is the set of exclusive rights granted to the author or creator of an original work, including the right to copy, distribute and adapt the work. These rights can be licensed, transferred and/or assigned.
        </span>
        <span class="glossBlock">
            <strong>Cover Shooting</strong> - A photo shooting for a cover of a magazine. Depending on the magazine it has great significance for the awareness of the model.
        </span>
        <span class="glossBlock">
            <strong>Cuttings</strong> - Documented releases of a model in magazines, catalogs or other Medias.
        </span>
    </div>
    <div class="glossNav">
        <a href="javascript:void(0)" page="c-page-1">1</a>
        <a href="javascript:void(0)" page="c-page-2">2</a>
    </div>
</div>
4

1 回答 1

1 
$('.glossNav a').on('click', function() {
    var $this = $(this),
        $selected = $('#' + $this.attr('page'));

    $this.closest('div.glossNav').siblings().hide();
    $selected.show(); 
});

同样正如 undefined 所建议的，当属性无效时，最好使用HTML-5 数据属性*。

于 2013-05-20T23:43:36.587 回答