JQuery和CSS選項卡常規洞察

-1

我下載了jQuery示例「選項卡演示」頁面。它包括HTML文件，3個CSS文件和兩個JS文件。當我查看HTML文件時，我看到了多個對id（＃）標記（如#tab，＃tabs-1，＃tabs-2等）的引用，但是當我查看時（手動並使用「搜索:)在支持CSS和JS文件中，我看到NO ID被定義了嗎？我看到很多類（。）但沒有匹配的ID。JQuery和CSS選項卡常規洞察

向我解釋這是如何工作的？我的目標當然是找到#tab所以我可以操縱它的大小，顏色，字體等

這是在頁面的底部...我相信這是關鍵。？

<script> $("#tabs").tabs(); </script>

來源

2015-01-07 NetTemple

你可以發佈你有什麼代碼？ –

http://www.lc4d.com/student_support/jq_tabs.html – NetTemple

請修改您的問題並粘貼問題代碼 –

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>tabs demo</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 

<style> 
.tabs_addition{ 
    min-height:500px; 
} 
</style> 
</head> 
<body> 

<div id="tabs" class="tabs_addition"> 
    <ul> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
    <p>First tab is active by default:</p> 
    <pre><code>$("#tabs").tabs(); </code></pre> 
    </div> 
    <div id="fragment-2"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

<script> 
$("#tabs").tabs(); 
</script> 

</body> 
</html>

所以這是html頁面的源代碼。 js代碼所做的是調用jquery ui中定義的tabs方法將所有這些額外的類添加到#tabs div以及其中的所有元素，以便由jquery ui定義的css可以格式化html，使其看起來像demo 。

現在你想「皮膚」它。你可以這樣定義你的風格：

#fragment-1 {background-color: #ff9900; font-size: 20px; color: #ffff00;} 
#fragment-2 {background-color: #333333; font-size: 22px; color: #ff5555;} 
#fragment-3 {background-color: green; font-size: 12px; color: #ffffff;}

至於沒有使用id風格的東西，我不認爲它真的很重要。請記住，ID是unqiue和類可以使用，無論你想要的時間。如果你有共同的風格，那麼使用類選擇器。如果這個元素是唯一的，那麼你可以繼續使用一個id。

來源

2015-01-07 21:49:35 Xzigraz

因此，您建議我將所有QU和originl CSS保持原樣 - 並簡單地將新的#fragment ID添加到我的網頁中以供皮膚使用。那麼只保留原始的JQ/CSS文件？ – NetTemple

是的，你應該永遠離開jquery ui庫。你可以在自己的css文件中用你的css覆蓋它，你可以在包含庫css文件後追加它。 – Xzigraz

JQuery和CSS選項卡常規洞察

回答

相關問題