CSS导航菜单

Question

I found a few discussions for CSS navigation menus. 我发现了CSS导航菜单的一些讨论。 But they are different from my problem. 但是它们与我的问题不同。 I have CSS navigation menu , what supposed to be is, the tab is changed to white once it is clicked, normal is red and hover is black. 我有CSS navigation menu ，应该是，单击该选项卡后将其更改为白色，正常是红色，而悬停是黑色。 Now it doesn't work that way. 现在，这种方式行不通。

Only class="current" (tabs-1) is white always and the rest are always red, even I clicked ,they don't change to white. 只有class="current" (tabs-1) is white always ，其余的始终为红色，即使单击，也不会变为白色。

The code is shown below. 代码如下所示。

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 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>

Answer 1

EDIT: 编辑：

So I did some research and you need to do some jQuery handling on those active tabs. 因此，我进行了一些研究，您需要在这些活动选项卡上进行一些jQuery处理。 I've edited the css, html and added the jQuery script to your document. 我已经编辑了CSS，HTML，并将jQuery脚本添加到了您的文档中。 Now, styling works fine on my end. 现在，样式对我而言效果很好。 Test it. 测试一下。

Source: http://inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery 资料来源： http : //inspirationalpixels.com/tutorials/creating-tabs-with-html-css-and-jquery

Here is the edited document for your mainpage.php: 这是您的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>

NOTICE: Don't forget to add your background images. 注意：不要忘记添加背景图像。 I've removed those lines from css for testing purposes. 为了测试目的，我已经从css中删除了这些行。

Answer 2

Replace the $( "#tabs" ).tabs(); 替换$( "#tabs" ).tabs(); with $( "#maintopmenu" ).tabs(); 与$( "#maintopmenu" ).tabs(); at the footer. 在页脚。

CSS导航菜单

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-01-08 14:27:45

解决方案2
0 2016-01-08 14:46:12

CSS导航菜单

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-01-08 14:27:45

解决方案2 0 2016-01-08 14:46:12

解决方案1
1 已采纳 2016-01-08 14:27:45

解决方案2
0 2016-01-08 14:46:12