Меню навигации CSS

Я нашел несколько обсуждений для навигационных меню CSS. Но они отличаются от моей проблемы. У меня есть CSS navigation menu, то, что должно быть, вкладка меняется на белый, как только она нажата, нормальная красная, а наведение - черное. Теперь это не работает.Меню навигации CSS

Только class="current" (tabs-1) is white always, а остальные всегда красные, даже я щелкнул, они не меняются на белый.

Код показан ниже.

mainpage.php 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 

<style type="text/css"> 
#background {background: url(main_background.jpg);} 


/*Top menu css*/ 
hr { 
    border:none; 
    border-top:1px solid #CCCCCC; 
    height:1px; 
    margin-bottom:25px; 
    } 

#maintopmenucontainer{ 
    height:24px; 
    background:#000; 
    display:block; 
    padding:45px 0 0 15px; 
    } 

#maintopmenu{ 
    position:relative; 
    display:block; 
    height:24px; 
    font-size:11px; 
    font-weight:bold; 
    font-family:Arial,Verdana,Helvitica,sans-serif; 
    } 

#maintopmenu ul{ 
    margin:0px; 
    padding:0; 
    list-style-type:none; 
    width:auto; 
    } 

#maintopmenu ul li{ 
    display:block; 
    float:left; 
    margin:0 1px 0 0; 
    } 

#maintopmenu ul li a{ 
    display:block; 
    float:left; 
    color:#fff; 
    text-decoration:none; 
    padding:5px 20px 0 20px; 
    height:19px; 
    background:transparent url(maintopmenu_bg-OFF.gif) no-repeat top left; 
    } 

#maintopmenu ul li a:hover{ 
    color:#fff; 
    background:transparent url(maintopmenu_bg-OVER.gif) no-repeat top right; 
    } 

#maintopmenu ul li a.current,#maintopmenu ul li a.current:hover{ 
    color:#000; 
    background:#fff; 
    } 
/*Top menu css*/ 

</style> 


</head> 

<body> 

<hr /> 
<div id="maintopmenucontainer"> 
    <div id="maintopmenu"> 
    <ul> 
     <li><a href="#tabs-1" class="current"><span>Landed</span></a></li> 
     <li><a href="#tabs-2"><span>Apartment</span></a></li> 
     <li><a href="#tabs-3"><span>Condominium</span></a></li> 
     <li><a href="#tabs-4"><span>Commecial</span></a></li> 
     <li><a href="#tabs-5"><span>Farm</span></a></li> 

    </ul> 
    <div id="tabs-1"> 
     <?php include 'mainpage_menu_landed.php'; ?> 
    </div> 
    <div id="tabs-2"> 
     <?php include 'mainpage_menu_landed.php'; ?> 
    </div> 
    <div id="tabs-3"> 

    </div> 
    <div id="tabs-4"> 

    </div> 
    <div id="tabs-5"> 

    </div> 
    </div> 
</div> 

</body> 
<script> 
    $(function() { 
    $("#maintopmenu").tabs(); 
    }); 
</script> 
</html>

mainpage_menu_landed.php

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css"> 

<style type="text/css"> 
#background {background: url(main_background.jpg);} 


/*Drop Down Menu */ 
fieldset { 
     border: 0; 
    } 
    label { 
     display: block; 
     margin: 30px 0 0 0; 

    } 
    select { 
     width: 150px; 

    } 
    .overflow { 
     height: 200px; 
    } 
/*Drop Down Menu*/ 

.button { 

border-top: 1px solid #96d1f8; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+61 */ 
background: #ff3019; /* Old browsers */ 
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 61%); /* FF3.6-15 */ 
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 61%); /* Chrome10-25,Safari5.1-6 */ 
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 61%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0); /* IE6-9 */ 
padding: 5px 10px; 
border-radius: 12px; 
box-shadow: rgba(0, 0, 0, 1) 0 1px 0; 
text-shadow: rgba(0, 0, 0, .75) 0 1px 0; 
color: white; 
font-size: 25px; 
font-weight: bold; 
font-family: Segoe; 
text-decoration: none; 
vertical-align: middle; 
width: 100px; 
text-align: center; 
} 

</style> 
</head> 

<body> 

<div id="background"> 
<form name="Landed" id="Landed" method="post" > 
<br /><br /><br /> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
<select name="divstate" id="divstate" > 
     <optgroup label="Divisions" selected="selected"> 
     <option>Yangon</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     </optgroup> 
     <optgroup label="States"> 
     <option>9</option> 
     <option>10</option> 
     <option>11</option> 
     <option>12</option> 
     <option>13</option> 
     <option>14</option> 
     <option>15</option> 
     <option>16</option> 
     <option>17</option> 
     <option>18</option> 
     <option>19</option> 
     </optgroup> 
</select> 
&nbsp;&nbsp;&nbsp; 
<select name="township" id="township" >  
     <option>Yangon</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     <option>6</option> 
     <option>7</option> 
     <option>8</option> 
     </optgroup> 
</select> 
&nbsp;&nbsp;&nbsp; 
<input maxlength="100" type="text" name="min_price" id="min_price" placeholder="Minimum price"/> 

&nbsp;&nbsp;&nbsp; 
<input maxlength="100" type="text" name="max_price" id="max_price" placeholder="Maximum price"/> 

&nbsp;&nbsp;&nbsp; 
<a class="button" onclick="searchButtonAction()" id="search" href="#">Search</a> 
<br /><br /><br /> 
</form> 
</div> 
</body> 

</html>

источник

2016-01-08 batuman

Проблемы, безусловно, связаны с загрузкой содержимого внутри ваших вкладок. Если вы оставите свой контент со своих вкладок, они работают нормально. Я попытаюсь воссоздать вашу ситуацию на своем сервере. Повторите отправку своей главной страницы_menu_landed.php, чтобы я мог добавить ее в свою среду для тестирования. Спасибо. – c00ki3s

@ c00ki3s Да, но когда вы нажимаете, оно не меняется на белый. Tab-1 всегда белый. Поскольку Tab-1 является классом = «текущий». – batuman

Проверьте мой отредактированный ответ. Стайлинг должен работать сейчас. – c00ki3s

EDIT:

Так что я сделал некоторые исследования, и вы должны сделать некоторые JQuery обработки на этих активных вкладок. Я редактировал css, html и добавил сценарий jQuery в ваш документ. Теперь, стилизация работает отлично на моем конце. Попробуй это.

Источник:http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery

Вот отредактированный документ для mainpage.php:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
     <style type="text/css"> 
      hr { 
       border:none; 
       border-top:1px solid #CCCCCC; 
       height:1px; 
       margin-bottom:25px; 
      } 

      #maintopmenucontainer{ 
       height:24px; 
       background:#000; 
       display:block; 
       padding:45px 0 0 15px; 
      } 

      #maintopmenu{ 
       position:relative; 
       display:block; 
       height:24px; 
       font-size:11px; 
       font-weight:bold; 
       font-family:Arial,Verdana,Helvitica,sans-serif; 
      } 

      #maintopmenu ul{ 
       margin:0px; 
       padding:0; 
       list-style-type:none; 
       width:auto; 
       } 

      #maintopmenu ul li{ 
       display:block; 
       float:left; 
       margin:0 1px 0 0; 
      } 

      #maintopmenu ul li a{ 
       display:block; 
       float:left; 
       color:#fff; 
       text-decoration:none; 
       padding:5px 20px 0 20px; 
       height:19px; 
       background:#ff3019; 
      } 
      #maintopmenu .tab-links a:hover { 
       background:#ffffff; 
       color:#000; 
       text-decoration:none; 
      } 
      #maintopmenu .tab-links li.active a, 
      #maintopmenu .tab-links li.active a:hover { 
       background:#ffffff; 
       color:#000; 
       text-decoration:none; 
      } 
     </style> 
    </head> 
<body> 

<hr /> 
<div id="maintopmenucontainer"> 
    <div id="maintopmenu"> 
    <ul class="tab-links"> 
     <li class="active"><a href="#tabs-1"><span>Landed</span></a></li> 
     <li><a href="#tabs-2"><span>Apartment</span></a></li> 
     <li><a href="#tabs-3"><span>Condominium</span></a></li> 
     <li><a href="#tabs-4"><span>Commecial</span></a></li> 
     <li><a href="#tabs-5"><span>Farm</span></a></li> 

    </ul> 
    <div id="tabs-1" class="tab active"> 
     <?php include 'mainpage_menu_landed.php'; ?> 
    </div> 
    <div id="tabs-2" class="tab"> 
     <?php include 'mainpage_menu_landed.php'; ?> 
    </div> 
    <div id="tabs-3" class="tab"> 

    </div> 
    <div id="tabs-4" class="tab"> 

    </div> 
    <div id="tabs-5" class="tab"> 

    </div> 
    </div> 
</div> 

</body> 
<script> 
    //MANUAL TAB STYLING 
    jQuery(document).ready(function() { 
     jQuery('#maintopmenu .tab-links a').on('click', function(e) { 
      var currentAttrValue = jQuery(this).attr('href'); 
      jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 
      jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 
      e.preventDefault(); 
     }); 
    }); 
    $(function() { 
     $("#maintopmenu").tabs(); 
    }); 
</script> 
</html>

ВНИМАНИЕ: Не забудьте добавить фоновые изображения. Я удалил эти строки из css для тестирования.

источник

2016-01-08 14:27:45 c00ki3s

Точно, он работает по всем вопросам. Загрузка формы. – batuman

С радостью помогите :) – c00ki3s

Замените $("#tabs").tabs(); на $("#maintopmenu").tabs(); на нижнем колонтитуле.

источник

2016-01-08 14:46:12

Да, я нашел эту ошибку, но все тот же. – batuman

есть какая-либо ошибка консоли? вы можете дать мне jsfiddle демо? –

Меню навигации CSS

ответ

Смежные вопросы