link в jquery-ui accordion

Question

У меня есть ссылка в содержимом div jquery-ui accordion. Он работает, но не отформатирован, как и остальные мои ссылки. Я нашел это на jquery-ui accordion page:

Если у вас есть ссылки внутри содержание аккордеона и использовать а-элементы, как заголовки, добавить класс к ним и использовать его в качестве заголовка, например. header: 'a.header'.

Однако я не уверен, как это сделать. Я предполагаю, что мне нужно изменить .css для аккордеона, чтобы использовать этот новый класс a.header для заголовков, а затем мои обычные элементы a будут использовать css, чтобы остальная часть элементов a на моем сайте использовалась?

Вот .css для аккордеона:

/* Accordion 
----------------------------------*/ 
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } 
.ui-accordion .ui-accordion-li-fix { display: inline; } 
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } 
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } 
/* IE7-/Win - Fix extra vertical space in lists */ 
.ui-accordion a { zoom: 1; } 
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } 
.ui-accordion .ui-accordion-content-active { display: block; } 

Answer 1

Я рекомендую использовать что-то вроде поджигатель, чтобы проверить ваш элемент. Оттуда вы можете точно определить, какая часть этого CSS влияет на вашу ссылку, чтобы вы могли ее стилизовать. Это или дать ссылку на свое собственное имя класса, чтобы он был таким, каким вы хотите. Если вы хотите перейти непосредственно к CSS jQuery jQuery, возможно, изучите стиль тегов с «a» в них и посмотрите, доставит ли он вас где угодно.

т.е.:

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } 
/* IE7-/Win - Fix extra vertical space in lists */ 
.ui-accordion a { zoom: 1; } 
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 

те из них

Answer 2

Вы можете изменить заголовки, чтобы использовать что-то другое, чем тег, а затем установить свойство, когда вы создаете гармошку:

<div id="accordion"> 
    <h3>My Header</h3> 
    <div>My content with a <a href="#">link</a></div> 
    <h3>Header Two</h3> 
    <div>Some more stuff...</div> 
</div> 


$("#accordion").accordion({ header: 'h3' }); 

Answer 3

У меня есть веб-сайт, где мне нужно это сделать, и я использую код ниже, чтобы выполнить различие между ссылками и заголовками в аккордеоне:

Markup:

<div id="accordion"> 
    <h3> 
    <a href="MyNewPage.aspx" rel="newpage">Link To a New Page</a> 
    </h3> 
    <h3> 
    <span class="name">Dental Providers</span> 
    </h3> 
    <div> 
     Some Content with a <a href="#">Link to more stuff</a></div> 
    </div> 
</div> 

JQuery:

 //redirect headers that link to new pages 
    $('A[rel="newpage"]').click(function() { 
     window.location=$(this).attr('href'); 
     return false; 
    }); 
    //set up the accordion to use the h3 header 
     $("#accordion").accordion({ 
     header: 'h3', 
     autoHeight: false, 
     collapsible: true, 
     fillSpace: false, 
     icons: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' } 
    });