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內的鏈接

回答

相關問題