jquery-ui accordion内的链接

我有一个jquery-ui手风琴div的内容中的链接。它的工作原理，但没有像我的其他链接格式化。我发现这对jquery-ui accordion page：jquery-ui accordion内的链接

如果你有手风琴内容中的链接，并使用一个元素作为标题，添加一个类给他们，并用其作为标题，例如。标题：'a.header'。

但是，我不确定如何做到这一点。我假设我需要更改手风琴的.css以将这个新的a.header类用于标题，然后我的常规a元素将使用我网站上其他a元素使用的css？

下面是手风琴名为.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; }

来源

2010-11-01 RememberME

我建议使用像萤火虫来检查你的元素。从那里你可以弄清楚CSS的哪个部分正在影响你的链接，所以你可以这样设计。那或者给链接自己的类名称来按照你想要的样式进行设置。如果你想直接去jQuery UI的CSS，也许看看样式中的'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; }

比不上那些

来源

2010-11-01 13:59:32 Kobby

不得不第二次使用萤火虫的。对于任何使用样式表的网页开发工作来说，这是必不可少的，它修改了用户界面的javascript .... – 2010-11-02 18:08:41

我最终评论了大部分的.ui-widget css代码，这些代码也清除了我遇到的其他一些小问题。 – RememberME 2010-11-02 19:19:41

是的jQuery UI样式表是一个样式表的所有小部件，你只需要担心你使用的小部件的样式:) – Kobby 2010-11-04 04:44:00

你可以改变你的标题用其他的东西比一个标签，然后设置，当你创建手风琴属性：

<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' });

来源

2010-11-02 17:22:12

我有一个网站，我需要做到这一点，我使用下面的代码来完成区分手风琴中的链接和标题：

标记：

<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' } 
    });

来源

2010-11-02 17:55:06

jquery-ui accordion内的链接

回答

相关问题