Навигация с вкладками

0

Мне трудно понять, как сделать следующее:

Я хочу иметь две вкладки (горизонтальные рядом друг с другом), одну для поиска (и помечен как таковой), а другую для записи (помечен как таковой). Когда выбрана вкладка поиска, я хочу, чтобы окно поиска присутствовало, и когда выбрана вкладка post, я хочу, чтобы в нем присутствовало другое окно поиска. Я не хочу, чтобы окна поиска были скрыты. Я предполагаю, что это по существу табуляция навигации с использованием CSS, но я не могу на всю жизнь понять, как заставить ее работать.

это html, который у меня есть до сих пор (я новичок в этом, поэтому, пожалуйста, любой совет будет замечательным)

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="">Search</a></li>
   <div class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

<li class="second-selected"><a href="">Post</a></li> 
<div class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>
</ul>
</div>
  • 0
    Пожалуйста, предоставьте нам некоторый код (например, через jsBin ) и то, что вы уже получили.
  • 0
    Вы можете сделать это с помощью чистого CSS с помощью псевдокласса: target, но обычно это делается с помощью JavaScript.
Теги:

4 ответа

0

Извините за мой предыдущий пост. Я немного изменил вкладку с вкладками Danile, и теперь он масштабируется и более надежен.

Thanx Danield.

    li {
                display: inline-block;
                margin-right: 10px;
                list-style: none;
            }

            .frame {
                display: none;
            }

                .frame:target {
                    display: block;
                }





    /// Markup


    <div id="navigation">
            <ul class="nav">
                <li><a href="#tab1">Tab1</a></li>
                <li><a href="#tab2">Tab2</a></li>
                <li><a href="#tab3">Tab3</a></li>
                <li><a href="#tab4">Tab4</a></li>
            </ul>
        </div>

            <div id="tab1" class="frame">
                <p>
                    Tab 1
                </p>
            </div>

            <div id="tab2" class="frame">
                <p>
                    Tab 2
                </p>
            </div>

            <div id="tab3" class="frame">
                <p>
                    Tab 3
                </p>
            </div>

            <div id="tab4" class="frame">
                <p>
                    Tab 4
                </p>
            </div>
Поделиться
0

Есть и другой способ с чистым css. Трудность заключается в сохранении "активное" состояния вкладки, и это может быть сделано с помощью radio - входа на кнопке вкладки. Это немного хакерский, но он отлично работает

Html будет выглядеть примерно так:

<ul class="tabs">
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-search' checked/>
        <label for='tab-search'>Search</label>
        <div class="content">
            <h2>The search page</h2>
        </div>
    </li>
    <li class="tabs-page">
        <input type='radio' name='tab' id='tab-post' />
        <label for='tab-post'>Post</label>
        <div class="content">
            <h2>The post page</h2>
        </div>
    </li>
</ul>

Обратите внимание на входы и метки, которые будут служить в качестве кнопок. (также обратите внимание, что я исправил вашу разметку, вы можете использовать только li как прямой дочерний элемент ul !)

Css будет выглядеть примерно так:

input[name='tab'] {
    display: none;
}
input[name='tab'] ~ .content {
    display: none;
}
input[name='tab']:checked ~ .content {
    display: block;
}

Объединив селектор :checked (чтобы определить состояние кнопки "tab") и селектор sibling ~, вы можете определить, какую вкладку следует отображать.

Я также привел небольшой пример для вас: http://jsfiddle.net/j9YbW/

Поделиться
0

Так вы делаете это с помощью :target pseudo class

FIDDLE

наценка

<div id="navigation">
  <ul class="nav"> 
   <li class="first-selected"><a href="#Search">Search</a></li>
   <li class="second-selected"><a href="#Post">Post</a></li> 
   </ul>  
</div>

<div id="Post" class="post"> 
 <p><form method="post" action="twocents.html">
 <label for="Search"></label>
 <input type="text" name="Post" id="Post"/>
 <input type="submit" value="Post"/></p>
</div>

<div id="Search" class="search">
    <p><form method="post" action="twocents.html">
    <label for="Search"></label>
    <input type="text" name="Search" id="Search"/>
    <input type="submit" value="Search"/></p>
</div>

CSS

li
{
    display: inline-block;
}
.search
{
    display: block;
}
.post
{
    display:none;
}
.post:target
{
    display: block;
}

.post:target + .search
{
    display: none;
}
Поделиться
0

Это лучшее, что вы могли бы сделать с чистым css.

/// Markup

<ul class="tabs">
        <li tabindex="1">
            <a>Search</a>
            <div class="tab-content">
                Search : <input type="text" />
            </div> 
        </li>
        <li tabindex="1">
            <a>Post</a>
            <div class="tab-content">
                Post: <input type="text" />
            </div> 
        </li>
    </ul>


/// CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}
ul.tabs li {
  float: left;
  margin: 20px 0 5px 10px;
  list-style: none;
  width: 100px;
}
ul.tabs li a {
  display: block;
  background-color: #ccc;
  padding: 5px 10px;
  cursor: pointer;
  text-align: center;
}
ul.tabs li a:hover {
  background-color: #7cc6fb;
}
ul.tabs li:focus {
  outline: none;
}
ul.tabs li:focus > a {
  background-color: #0094ff;
}
ul.tabs li:focus .tab-content {
  z-index: 100;
}
ul.tabs li .tab-content {
  position: absolute;
  left: 20px;
  top: 70px;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  padding: 50px;
  background-color: #fff;
  border: 1px solid #999;
}
Поделиться
  • 0
    У приведенного выше есть много ограничений. Вы можете легко создать представление с вкладками, используя: селектор цели и настройку или переопределение значений z-index или отображение или видимость или что-то еще.
  • 0
    И есть еще один способ легко это сделать. Как и селектор: target, вы можете закрепить фреймы с вкладками, используя атрибут id. т.е. <a href="#search"> Поиск </a> и определите элемент с id = "search", чтобы браузер сам знал, что делать. Затем вы можете захватить событие onhashchange и соответственно переключить элементы. Но это требует немного JavaScript. (максимум 10 строк)
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню