HREF to DIV value

HREF to DIV value

本文关键字：value DIV to HREF      更新时间：2023-09-26

我有这个代码：

<a href="test" class="1"> text</a>

和隐藏的CCD_ 1

<div class="element" id="test"> x </div>

是否有可能对此id="test"使用href？我的意思是，我想点击"文本"并用id="test" 打开div

如果将value更改为id（value不是div元素支持的属性），则可以通过单击链接显示隐藏的div：

<div class="element" id="test" style="display:none;"> x </div>
<a href="#" onclick="document.getElementById('test').style.display = 'block';">text</a>

您可以在文档中创建锚链接，从而使浏览器滚动到给定的元素。

你需要使用身份证：

<a href="#mydiv"> text</a>
<div id="mydiv"> x </div>

也就是说，链接的href需要指向DIV元素的ID。

但是，如果您希望链接显示DIV，请执行以下操作：

<a href="#mydiv" onclick="document.getElementByid('mydiv').style.display = 'block';">text</a>
<div id="mydiv" style="display:none;">This div is hidden by default, but will be visible once the link is clicked ....</div>

<script>
    function showDiv()
     {
         //Code to display the div
     }
</script>
<a href="#" class="1" onclick="showDiv('test')"> text</a>
<div class="element" value="test"> x </div>

尚未测试，但它应该可以像一样工作

try this
<!DOCTYPE html>
<html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">          </script>
<script>
$(document).ready(function () {
     $("a").click(function(){
     $("#test").slideDown();
  });         
    });
 </script>
 </head>
  <body>
 <a href="#">text</a>
<div id="test" style="display:none">x</div>
 </body>
 </html>

您可以使用jquery 来完成此操作

HTML：

<a href="#test" class="1" > text</a> //ENTER THE ID IN HREF
<div id="test" class="element" value="test"> x </div> // ENTER THE HREF AS DIV ID

Jquery：

$("a").click(function () {
    var id_name = this.hash.substr(1); //gets the text after # in href
    $("#" + id_name).show(); //it displays the div which has that id
});

p.S：如果您想在单击DIV1标签时使用hide/show，则可以使用toggle而不是show。

$("a").click(function () {
    var id_name = this.hash.substr(1);
    $("#" + id_name).show();
});
#test {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#test" class="1"> text</a>
<div id="test" class="element" value="test">x</div>

相关文章：