.
:
__________ ..
:
__________ ..
2013
:
CSS JavaScript . , , ; . , .
1. :
1.1. :
, .
1.2. :
. , , . .
, . :
 |
:
. , , . .
. children(). , .
o : <div>, <div>. , , .
. find() .
$(mainDiv).click(function() {
$(this).find(div).show().css(outline,red 2px solid);})
, , <div>, . .find (div) <div>, , . <div>. .children().
$(mainDiv).click(function() {
$(this).children(div).show().css(outline,red 2px solid);})
<div> , <div>.
|
|
|
.parent().
. , , hover <a>, <div> (, ). <div> .parent()
o :
$(#gellery a).hover(
Function() {
//
$(this).parent().css(bsckgroundColor,white);
};
Function() {
//
$(this).css(outline,);
// div
$(this).parent().css(backgroundColor,);
}
); // hover
, ( <div>) . , , .
- (Document Object Model) HTML, , . (DOM).
1. HTML
. ,
.
. , . , .
<div class="tabbedPanels" id="tabbed1">
<ul class="tabs">
<li><a href="#panel1" tabindex="1"> 1</a></li>
<li><a href="#panel2" tabindex="2"> 2</a></li>
<li><a href="#panel3" tabindex="3"> 3</a></li>
</ul>
<div class="panelContainer">
<div id="panel1" class="panel">
<h2> 1</h2>
<p> </p>
</div>
<div id="panel2" class="panel">
<h2> 2</h2>
<p> </p>
</div>
<div id="panel3" class="panel">
<h2> 3</h2>
<p> </p>
</div>
</div>
</div>
<div> <ul>, <li>. id class CSS jQuery. HTML , .
2. CSS
. , .
.tabbedPanels {
width: 80%;
float: left;
margin:50px;}
.tabs {
margin: 0;
padding: 0;}
.tabs li {
float: left;
list-style: none;
padding: 0;
margin: 0;}
.tabs a {
display: block;
|
|
|
text-decoration: none;
padding: 3px 5px;
background-color: rgb(110,138,195);
margin-right: 10px;
border: 1px solid rgb(153,153,153);
border-radius:5px 5px 0 0;
margin-bottom: -1px;
color:#fff;}
.tabs.active {
border-bottom: 1px solid white;
background-color: white;
color:#000;
position: relative;}
.panelContainer {
clear: both;
margin-bottom: 25px;
border: 1px solid rgb(153,153,153);
background-color: white;
padding: 10px;}
.panel h2 {
color: rgb(57,78,121);
text-shadow: none;}
.panel p {
color: black;}
Html css , .
<link rel="stylesheet" href=" css " type="text/css" />
3. jQuery
-, .
, <head>:
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
css , js Html ,
.
<script type="text/javascript" src=" js ></script>
$(document).ready(function() {
$('.tabs a').bind('click focus',function() {
var $this = $(this);
$this.parents('.tabbedPanels')
.find('.panel').hide().end()
.find('.active').removeClass('active');
$this.addClass('active').blur();
var panel = $this.attr('href');
$(panel).show();
return false;
});
$('.tabs').find('li:first a').click();
});
$(document).ready (function (){...});
, . :
$(tabs a).click (function () {...}); : <a> tabs,
click ();
. , , , , . .
1) .
2) , .
3) .
4) , .
5) , , .
2.2.1. 
2.2.2. 
2.2.4. 
