Сегодня я познакомлю вас с интересной возможностью создания на вашем сайте вкладок при помощи jQuery.
Как это будет выглядеть, вы можете видеть на картинке.А теперь непосредственно о том, как это сделать.
Для начала создаем HTML-документ. Сразу после тега <body> пишем код, который и представляет из себя структуру ссылок. Это и есть вкладки:
<div> <!-- вкладки --> <ul> <li><a href="#one">Первая</a></li> <li><a href="#two">Вторая</a></li> <li><a href="#three">Третья</a></li> <li><a href="#four">Четвертая</a></li> </ul>
Далее сразу же за этим кодом размещаем HTML-код контента каждой из вкладок:
<!-- текст вкладок --> <div id="one"> <p>From here naturally follows that the advertizing platform unnaturally concentrates an experimental corporate style, making use of experience of the previous campaigns. It is necessary to tell that the initial stage of carrying out of research will categorically neutralize media business, considering result of the previous media campaigns. Leadership on sales reflects the role business plan, winning a market segment. Within the limits of the concept of Akoffa and the Stack, media planning categorically draws the interpersonal business plan, raising a competition. Imidzhevaja advertizing, certainly, draws a strategic advertizing breadboard model, without reckoning with expenses.</p> </div> <div id="two"> <p>Leadership on sales reflects the role business plan, winning a market segment. Within the limits of the concept of Akoffa and the Stack, media planning categorically draws the interpersonal business plan, raising a competition. Imidzhevaja advertizing, certainly, draws a strategic advertizing breadboard model, without reckoning with expenses.</p> </div> <div id="three"> <p>The investment product without thinking about authorities reflects empirical strategic marketing, despite of actions of competitors. Tactics of forming of relations with agents homogeneously brakes production life cycle, considering modern lines. The communications factor, of course, justifies the collective non-standard approach, relying on the insider information. Each sphere of the market restores consumer client demand, working over the project. Increase of vital standards covers a target segment of the market, optimizing budgets. Awareness on a brand it is paradoxical the advertizing block brakes, making use of experience of the previous campaigns.</p> </div> <div id="four"> <p>Each sphere of the market restores consumer client demand, working over the project. Increase of vital standards covers a target segment of the market, optimizing budgets. Awareness on a brand it is paradoxical the advertizing block brakes, making use of experience of the previous campaigns.</p> </div> </div>
Теперь подключаем CSS-стили и скрипты, размещая следующий код между тегами <head></head>:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Теперь все готово, можете посмотреть что у вас получилось.