Question

我很难搞清楚为什么我的标签式ID无法正常工作或运行应该如此。在点击时，它应该用不同的东西替换文本（即正在构建的页面）。

这是我到目前为止所拥有的......

HTML

<!doctype html>
<html>
<head>
  <title>Main Page</title>  <!--main page title -->
  <script type="text/javascript" scr="home_page.js"></script>
  <link rel="stylesheet" type="text/css" href="home_page.css"/>
</head>
<body>

  <h1> Express Shop </h1>
  <div class="content">
    <div class="navbar">
      <ul>
        <li><a href="#" title="Home" class="active">Home</a></li>
        <li><a href="#" title="Inventory">Inventory</a></li>
        <li><a href="#" title="Directions">Directions</a></li>
        <li><a href="#" title="Contact Us">Contact Us</a></li>
      </ul>
  </div>

  <div id="tab1" class="tab active">
    <h3>Welcome to Express Shop!</h3>
    <p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
    <p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
  </div>

  <div id="tab2" class="tab">
    <h3>Inventory</h3>
    <p>Page Under Construction<p>
  </div>

  <div id="tab3" class="tab">
    <h3>Directions</h3>
    <p>Page Under Construction</p>
  </div>

  <div id="tab4" class="tab">
    <h3>Contact Us</h3>
    <p>Page Under Construction</p>
  </div>

</div>


</body>

</html>

CSS

h1 {
  font:bold 65px/60px Helvetica, Arial, Sans-serif;
  text-shadow:0px 2px 6px #333;
}

.content p {
  margin:20px;
}

.tab {    /*turn off display of all tabs(in-active) */
  display:none;
}


.navbar {
  position:relative;
  margin:0px 0px 0px -40px;
  /*border around tabs */
}

.navbar ul {
  list-style:none;
}

.navbar ul li {
  display:inline-block;
}


.navbar ul li:first-child a {
  -moz-border-radius-topleft:5px;
  -webkit-border-top-left-radius:5px;
}

.navbar ul li:last-child a {
  -moz-border-radius-topright:5px;
  -webkit-border-top-right-radius:5px;
}

.navbar ul li a {
  text-decoration:none;
  font:bold 14px Helvetica, Sans-Serif;
  padding:10px;
  margin-right:-7px;
  /*border-radius:3px; */
  background-color:#E0E0E0;
  transition:all linear 0.15s;
}

.navbar ul li a:hover {
  background-color:rgb(255, 173, 10);
}

/* needs to be fixed */
.navbar ul li a.active {
  background-color:rgb(255, 173, 10);
}

.tab.active {
  display:inherit;
  clear:both;
  margin-top:-7px;
  border:1px solid black;
  width:700px;
  -moz-border-radius-topright:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-top-right-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
}

h3 {
  text-transform:uppercase;
  padding:10px 0px 0px 10px;
  color:black
  text-shawdow:#000 0px 0px 2px;
}

的JavaScript

$(home_page.html).ready(function() {

  $('navbar ul li a').click(function() {
    var tab_id =$(this).attr('href');

    $('navbar ul li a').removeClass('active');
    $('tab').removeClass('active');

    $(this).addClass('active');
    $("#" + tab_id).addClass('active');
  });

});

Answer 1

问题：

您需要在自己的脚本
$(document).ready - 这会使您的代码在加载页面时运行
如果您想选择class，则需要在其前面添加.（就像CSS一样），例如$('navbar ul li a')应为$('.navbar ul li a')
在您的标签链接中，您只有href="#"，您需要输入正确的id标签（例如#tab1），因为您已经拥有#在这里，您不再需要$(tab_id)

我修复了您的代码，您可以尝试下面的工作版本：

＆＃13;

$(document).ready(function() {

  $('.navbar ul li a').click(function() {
    var tab_id = $(this).attr('href');

    $('.navbar ul li a').removeClass('active');
    $('.tab').removeClass('active');

    $(this).addClass('active');
    $(tab_id).addClass('active');
  });

});

＆＃13;

h1 {
  font:bold 65px/60px Helvetica, Arial, Sans-serif;
  text-shadow:0px 2px 6px #333;
}

.content p {
  margin:20px;
}

.tab {    /*turn off display of all tabs(in-active) */
  display:none;
}


.navbar {
  position:relative;
  margin:0px 0px 0px -40px;
  /*border around tabs */
}

.navbar ul {
  list-style:none;
}

.navbar ul li {
  display:inline-block;
}


.navbar ul li:first-child a {
  -moz-border-radius-topleft:5px;
  -webkit-border-top-left-radius:5px;
}

.navbar ul li:last-child a {
  -moz-border-radius-topright:5px;
  -webkit-border-top-right-radius:5px;
}

.navbar ul li a {
  text-decoration:none;
  font:bold 14px Helvetica, Sans-Serif;
  padding:10px;
  margin-right:-7px;
  /*border-radius:3px; */
  background-color:#E0E0E0;
  transition:all linear 0.15s;
}

.navbar ul li a:hover {
  background-color:rgb(255, 173, 10);
}

/* needs to be fixed */
.navbar ul li a.active {
  background-color:rgb(255, 173, 10);
}

.tab.active {
  display:inherit;
  clear:both;
  margin-top:-7px;
  border:1px solid black;
  width:700px;
  -moz-border-radius-topright:5px;
  -moz-border-radius-bottomright:5px;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-top-right-radius:5px;
  -webkit-border-bottom-right-radius:5px;
  -webkit-border-bottom-left-radius:5px;
}

h3 {
  text-transform:uppercase;
  padding:10px 0px 0px 10px;
  color:black
  text-shawdow:#000 0px 0px 2px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1> Express Shop </h1>
  <div class="content">
    <div class="navbar">
      <ul>
        <li><a href="#tab1" title="Home" class="active">Home</a></li>
        <li><a href="#tab2" title="Inventory">Inventory</a></li>
        <li><a href="#tab3" title="Directions">Directions</a></li>
        <li><a href="#tab4" title="Contact Us">Contact Us</a></li>
      </ul>
  </div>

  <div id="tab1" class="tab active">
    <h3>Welcome to Express Shop!</h3>
    <p>Your one stop shop for repairs! We work with various laptops, PCs, iPhones, iPads, tablets, smart phones and more!</p>
    <p> We are also an authorized dealer for PagePlus Cellular and have many products in our inventory for sale.</p>
  </div>

  <div id="tab2" class="tab">
    <h3>Inventory</h3>
    <p>Page Under Construction<p>
  </div>

  <div id="tab3" class="tab">
    <h3>Directions</h3>
    <p>Page Under Construction</p>
  </div>

  <div id="tab4" class="tab">
    <h3>Contact Us</h3>
    <p>Page Under Construction</p>
  </div>

</div>

＆＃13;

为什么我的标签开关不起作用？

1 个答案: