Question

大家好我正在尝试为链接添加一个id，以便它可以产生一些内容。例如，我有一个按钮，单击该按钮将显示一个带有文本的div。这个div是隐藏的，这很完美，我想尝试使用带有图标的花药按钮重现这一次但是由于某种原因我无法让它工作：

为了让我的按钮工作，我需要做的就是：

  <button type="button" class="btn btn-warning" id="header2">Reklambyrå</button>

该ID与某些JS相关联，向我展示了内容：的 JS：

$("#header1").click(function() {
  $("#section_one").fadeToggle(2000);
  $("#section_two").fadeOut(1000);
});

这很好用，但是当我把这个html放在：

<div class="sidebar-social">
    <ul>
        <li>
            <a href="#" title="Facebook" target="_blank" rel="nofollow" id="header1">
                <i class="fa fa-paint-brush"></i>
                <span id="header1">facebook</span>
            </a>
        </li>
        <li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-mobile"></i><span>twitter</span></a></li>
    </ul>
</div>

现在我希望facebook图标链接到与按钮相同的内容，但我似乎无法让它完全工作，任何想法？

谢谢

Answer 1

问题是你有更多的1个元素{id #header1导致脚本只能用于第一个#header1按钮。您不能拥有重复的ID，因此我更改了ID。

您应该使用您要单击的元素共有的类。例如，将类.clickME添加到按钮，将.clickME添加到a Facebook。

或者，如果您只有一个#header1的ID，那么就使用它。

然后在点击功能中添加.preventDefault()，以便链接不会跟随href，而是按照您的意图执行

$("#header1").click(function(e) {
   e.preventDefault()
      $("#section_one").fadeToggle(2000);
      $("#section_two").fadeOut(1000);
    });
    $("#header2").click(function() {
      $("#section_two").fadeToggle(2000);
      $("#section_one").fadeOut(1000);
    });

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.parallax1 {
  padding-left: 30px;
  margin-top: 33px;
  display: none;
}

.sidebar-social {
  margin: 0;
  padding: 0;
}

.sidebar-social ul {
  margin: 0;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-social li {
  text-align: center;
  width: 15.9%;
  margin-bottom: 3px!important;
  background-color: #fff;
  border: 1px solid #eee;
  display: inline-block;
  font-size: 10px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-social i {
  display: block;
  margin: 0 auto 10px auto;
  width: 32px;
  height: 32px;
  margin: 10px auto 0;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  color: #383533;
  margin-top: 0;
  padding-top: 5px;
}

.sidebar-social a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  display: block;
  margin: 0;
  padding: 0;
}

.sidebar-social a span {
  color: black;
  font-size: 10px;
  padding: 5px 0 10px 0;
  display: block;
  text-transform: uppercase;
  font-family: 'Josefin Sans';
  letter-spacing: 1px;
}

.sidebar-social a:hover i.fa-paint-brush {
  color: #FFC600;
}

.sidebar-social a:hover i.fa-mobile {
  color: #FFC600
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <div class="sidebar-social">

      <ul>
        <li>
          <!-- 	  Problem here  -->
          <a href="#" title="Facebook" target="_blank" rel="nofollow" class="clickME" id="header1"><i class="fa fa-paint-brush" id="header1"></i>
      <span id="header1span">facebook</span></a></li>
        <!-- 	   -->

        <li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-mobile"></i><span>twitter</span></a>
        </li>
      </ul>


    </div>
  </div>
</div>




<div class="parallax1" id="section_one">
  <div class="row newtryh2">
    <div class="col-xs-12 col-sm-6 col-md-6 middlethat">
      <h2>WiFi via Facebook</h2><span class="border"></span>

    </div>
  </div>
</div>

Answer 2

将您的功能更改为

$("#header2").on('click',function (e) {
    e.preventDefault();
    $("#section_two").fadeToggle(2000);
    $("#section_one").fadeOut(1000);
});

并删除HTML中的重复header1 ID和锚点

中的target="_blank"

Answer 3

id应该是唯一的，因此您的脚本仅在第一次出现时运行。您可以更改您的选择器以将ID视为另一个属性（它可以工作，但我不会这样做）或为两个按钮引入新属性。

将id作为属性的选择器如下所示：

$("*[id='header1']").click(function() {
  $("#section_one").fadeToggle(2000)
  $("#section_two").fadeOut(1000);
});

如果您选择向按钮引入新属性，则html将如下所示：

<li>
    <a href="#" title="Facebook" target="_blank" rel="nofollow" data-type="produce-content"><i class="fa fa-paint-brush"></i>
  <span>facebook</span></a>
</li>

和你的选择器：

$("*[data-type='produce-content']").click(function() {
  $("#section_one").fadeToggle(2000)
  $("#section_two").fadeOut(1000);
});

第一种方式可以让你轻松调试并确保它按预期工作，但我强烈反对它，因为id应该是唯一的。

添加ID以链接到类

3 个答案: