Question

我无法使用我的代码下拉列表。这是我的HTML：

<!--Tabs-->
    <div id="tabbed-menu">
      <ul class="tabs">
        <li id="tab-1" class="selected">Name</li>
        <li id="tab-2">About</li>
        <li id="tab-3">Comming Up</li>
      </ul>
      <div class="content">
        <div class="page" id="tab-1" style="display:block">
          <p>Brendon Baughn</p>
        </div>
        <div class="page" id="tab-2" style="display:none">
          <p>I am a 16-year-old programmer, still learning some HTML and CSS,
            JavaScript and jQuery.</p>
        </div>
        <div class="page" id="tab-3" style="display:none">
          <p>I am going to go to college for Computer Science and Programming,
          and hopefully become successful in life</p>
        </div>
      </div>
    </div>

这是我的jQuery：

$(document).ready(function(){
      $('.tabs li').click(function(){
        if ($(this).hasClass("selected") === false){
          $('.tabs li').removeClass('selected');
          $(this).addClass('selected');
        }
        var selectionId = $(this).attr('id');
        $('div .page').css('display', 'none');
        $('.page#' + selectionId).css('display', 'block');
      });
    });

我真的需要帮助。这将使我的网页看起来非常整洁（我有更多的信息，但这只是一些）。 http://jsfiddle.net/BBaughn/so2bmkgg/ （由于某种原因，链接不会从一个标签转到另一个标签）

Answer 1

您需要执行以下几个步骤：

将所有li.page元素更改为display:none
将您的jQuery click事件更改为mouseover
如果您希望在光标离开菜单区域时隐藏选项卡，请添加mouseout事件。
我还会将cursor:pointer添加到.tabs li:hover以获取最佳做法。

查看有关mouseover()的jQuery文档，并阅读jQuery events的完整列表。

见证明：

$(document).ready(function(){
      $('.tabs li').mouseover(function(){
        if ($(this).hasClass("selected") === false){
          $('.tabs li').removeClass('selected');
          $(this).addClass('selected');
        }
        var selectionId = $(this).attr('id');
        $('div .page').css('display', 'none');
        $('.page#' + selectionId).css('display', 'block');
      });
  
      $( "#tabbed-menu" ).mouseout(function() {
        $( '.page' ).css('display', 'none');
      });
    });

ul.tabs{
      text-align: center;
      list-style: none;
      position: relative;
      margin: 0;
      padding: 0;
      line-height: 26px;
      color: #0088CC;
      border-bottom: 1px solid #DDDDDD;
    }
    ul.tabs li{
      margin-bottom: -1px;
      padding: 3px 10px 0px 10px;
      border: 1px solid #DDDDDD;
      background: #EFEFEF;
      display: inline-block;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
    ul.tabs li.selected{
      background: #FFF;
      border-bottom-color: transparent;
    }
    ul.tabs li:hover {
      color: #333333;
      background: #FFFFFF;
    }
    div.page{
      text-align: center;
    }
    div.page li{
      text-align: left;
      list-style-type: none;
    }

    .tabs li:hover { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--Tabs-->
    <div id="tabbed-menu">
      <ul class="tabs">
        <li id="tab-1" class="selected">Name</li>
        <li id="tab-2">About</li>
        <li id="tab-3">Comming Up</li>
      </ul>
      <div class="content">
        <div class="page" id="tab-1" style="display:none">
          <p>Brendon Baughn</p>
        </div>
        <div class="page" id="tab-2" style="display:none">
          <p>I am a 16-year-old programmer, still learning some HTML and CSS,
            JavaScript and jQuery.</p>
        </div>
        <div class="page" id="tab-3" style="display:none">
          <p>I am going to go to college for Computer Science and Programming,
          and hopefully become successful in life</p>
        </div>
      </div>
    </div>

将鼠标悬停在标签上并将其下拉

1 个答案: