JQuery Tab-funktion die vorgegebener Standard-CSS-Formatierung abändern

D

Davicito

Erfahrenes Mitglied
Ich hab mal ne Frage an Euch.

Ich habe von der JQuery-Seite die Tab-Funktion eingebunden wie folgt
HTML: 
<head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">	  
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	<link rel="stylesheet" type="text/css" href="style/TabStyle.css"> 
         
        <script>
		$(document).ready(function(){			
			$( "#wrapper" ).tabs( { active: 0 });			
		}); 
	</script>
</head>
<body>
<div id="wrapper">
	<ul class="menu">
		<li  id="tab1"><a href="#fragment-1"><span>One</span></a></li>
		<li  id="tab2"><a href="#fragment-2"><span>Two</span></a></li>
		<li  id="tab3"><a href="#fragment-3"><span>Three</span></a></li>
	</ul>
        <div id="fragment-1" class="content">
                 Eins...
	</div>
        <div id="fragment-2" class="content">
                 Zwei...
        </div>
        <div id="fragment-3" class="content">
                 Drei... 
        </div>
</div>';
</body>
in der 2. Zeile befindet sich die JQuery Standard-Formatierung der Tabs und würde dies gerne mit meiner eigenen CSS-Formatierung, in Zeile 5, erweitern.

Habt Ihr eine Idee wie ich das einfach und unkompliziert machen kann, ohne die OpenSource CSS von JQuery ändern zu müssen?
Was sind Eure Erfahrungen damit?

Für jede Hilfe und Anregung, danke ich Euch in Voraus!

LG, Davicito.
 
Zuletzt bearbeitet:
Vielleicht liegt es daran, dass ich schon etwas müde bin, aber was möchtest du bitte? Von welchen Zeilen redest du?
 
In der 2. Zeile ist die CSS-Formatirung von JQuery eingebunden und würde gerne diese mit meinen CSS-Formatierungen - Zeile 5 - ergänzen.

Wie kann ich das machen, so das auch der aktive Tab angezeigt wird, wenn er angeklickt wurde?

LG, Davicito.
 
Dann pack doch einfach hinter deine Regeln ein !important – das sollte die jQuery-Regeln überschreiben.
 
Also Du meinst wenn ich z.B. in meiner CSS-Datei die !important, oben hinter den Klassennamen, angebe, oder wie meinst Du das genau? Kannst Du mir evtl. ein Beispiel posten wie genau Du das meinst?

z.B.
CSS: 
...
#wrapper !importent{
	
	margin: 7em auto;
	width: 400px;	
}
#wrapper ul !importent{
	list-style: none;
	list-style-position: outside;
}

#wrapper ul.menu li !importent{
	float:left;	
	margin-right: none;	
	margin-bottom: -1px;	
}

#wrapper ul.menu li !importent{
	font-weight: 700;
	display: block;
	padding: 5px 10px 5px 10px;
	background: #2f2f2f;
	margin-bottom: -1px;
	border: 1px solid #d0ccc9;
	border: 1px 1px 1px 1px;
	position:relative;
	color:white;
	cursor:pointer;
}
...

LG, Davicito
 
Zweierlei Dinge: erstens heißt es important, zweitens schreibst du dass nicht hinter den Selektor, sondern hinter die Regel, also beispielsweise so hier:
CSS: 
/* ... */
#wrapper {
    margin: 7em auto !important;
    width: 400px !important;
}
#wrapper ul {
    list-style: none !important;
    list-style-position: outside !important;
}
 
#wrapper ul.menu li {
    float:left !important;
    margin-right: none !important;
    margin-bottom: -1px !important;
}
 
#wrapper ul.menu li {
    font-weight: 700 !important;
    display: block !important;
    padding: 5px 10px 5px 10px !important;
    background: #2f2f2f !important;
    margin-bottom: -1px !important;
    border: 1px solid #d0ccc9 !important;
    border: 1px 1px 1px 1px !important;
    position:relative !important;
    color:white !important;
    cursor:pointer !important;
}
/* ... */
Du solltest damit aber sparsam umgehen und nur dort dahinter setzen, wo es wirklich nötig ist. Ansonsten solltest du dir mal die Spezifität der Selektoren ansehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück