Jquery 添加id以链接到类

嗨，伙计们，我正在尝试添加一个id到一个链接，以便它可以产生一些内容。例如，我有一个按钮，单击该按钮将显示一个div，其中包含文本。那个div是隐藏的，它工作得很好，这次我想尝试使用另一个带有图标的按钮复制它，但由于某些原因，我根本无法让它工作：

要使按钮正常工作，我需要做的就是：

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

这很好，但当我将此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图标链接到与按钮相同的内容，但我似乎根本无法让它工作，有什么想法吗

---

谢谢

问题是您有多个id为

#header1

的元素，这会导致脚本仅对第一个

#header1

按钮起作用。你不允许有重复的id，所以我更改了id

您应该使用一个对要单击的元素通用的类。例如，将class

。clickME

添加到按钮，并将

添加到
a
Facebook

或者，如果您只有一个带有
#header1
的id，则只需使用该id即可

然后在单击函数中添加
.preventDefault（）
，这样链接就不会跟随href，而是按照您的意图进行操作


$（“#标题1”）。单击（功能（e）{
e、 预防默认值（）
$（“第一节”）。fadeToggle（2000年）；
$（“第二节”）。淡出（1000）；
});
$（“#标题2”）。单击（函数（）{
$（“第二节”）。fadeToggle（2000年）；
$（“第一节”）。淡出（1000）；
});
/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
身体{
利润率：10px；
}
.视差1{
左侧填充：30px；
边缘顶端：33像素；
显示：无；
}
.侧边栏社交{
保证金：0；
填充：0；
}
.侧边栏{
保证金：0；
填充物：5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.侧边栏社交李{
文本对齐：居中；
宽度：15.9%；
保证金底部：3倍！重要；
背景色：#fff；
边框：1px实心#eee；
显示：内联块；
字体大小：10px；
填充：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.侧边栏社交一{
显示：块；
保证金：0自动10px自动；
宽度：32px；
高度：32px；
保证金：10px自动0；
线高：32px；
文本对齐：居中；
字体大小：20px；
颜色：#383533；
边际上限：0；
垫面：5px；
}
.侧边栏a{
文字装饰：无；
宽度：100%；
身高：100%；
显示：块；
保证金：0；
填充：0；
}
.侧边栏社会跨度{
颜色：黑色；
字体大小：10px；
填充：5px 0 10px 0；
显示：块；
文本转换：大写；
字体系列：“Josefin Sans”；
字母间距：1px；
}
.侧边栏a:悬停i.fa-paint-brush{
颜色：#FFC600；
}
.侧边栏社交a:悬停i.fa-mobile{
颜色：#FFC600
}







通过Facebook的WiFi
问题在于，您有多个id为
#header1
的元素，这导致脚本仅对第一个
#header1
按钮起作用。你不允许有重复的id，所以我更改了id

您应该使用一个对要单击的元素通用的类。例如，将class
。clickME
添加到按钮，并将
添加到
a
Facebook

或者，如果您只有一个带有
#header1
的id，则只需使用该id即可

然后在单击函数中添加
.preventDefault（）
，这样链接就不会跟随href，而是按照您的意图进行操作


$（“#标题1”）。单击（功能（e）{
e、 预防默认值（）
$（“第一节”）。fadeToggle（2000年）；
$（“第二节”）。淡出（1000）；
});
$（“#标题2”）。单击（函数（）{
$（“第二节”）。fadeToggle（2000年）；
$（“第一节”）。淡出（1000）；
});
/*作为外部资源包含最新编译和缩小的CSS*/
/*可选主题*/
@导入url（'//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap theme.min.css'）；
身体{
利润率：10px；
}
.视差1{
左侧填充：30px；
边缘顶端：33像素；
显示：无；
}
.侧边栏社交{
保证金：0；
填充：0；
}
.侧边栏{
保证金：0；
填充物：5px；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.侧边栏社交李{
文本对齐：居中；
宽度：15.9%；
保证金底部：3倍！重要；
背景色：#fff；
边框：1px实心#eee；
显示：内联块；
字体大小：10px；
填充：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.侧边栏社交一{
显示：块；
保证金：0自动10px自动；
宽度：32px；
高度：32px；
保证金：10px自动0；
线高：32px；
文本对齐：居中；
字体大小：20px；
颜色：#383533；
边际上限：0；
垫面：5px；
}
.侧边栏a{
文字装饰：无；
宽度：100%；
身高：100%；
显示：块；
保证金：0；
填充：0；
}
.侧边栏社会跨度{
颜色：黑色；
字体大小：10px；
填充：5px 0 10px 0；
显示：块；
文本转换：大写；
字体系列：“Josefin Sans”；
字母间距：1px；
}
.侧边栏a:悬停i.fa-paint-brush{
颜色：#FFC600；
}
.侧边栏社交a:悬停i.fa-mobile{
颜色：#FFC600
}







通过Facebook的WiFi
将功能更改为

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

并删除HTML中重复的
header1
id，并将函数更改为

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

并删除H中重复的
header1
id
$("*[id='header1']").click(function() {
  $("#section_one").fadeToggle(2000)
  $("#section_two").fadeOut(1000);
});

<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);
});