Question

我有一个基本网页。顶部设有一个带3个链接的菜单栏。我想只在一个div中更改内容，具体取决于所选的链接。我所知道的只是html和php。如何链接链接以仅更改内容div？

Answer 1

这不完美但它会改变'div'或在这种情况下改变'tr'

<SCRIPT type="text/javascript"> 
function showoptions()
{   
    if (something == "show") 
    {
        // Show
        document.getElementById("show").style.display = '';
    }

    else
    {
        // Hide
        document.getElementById("show").style.display = 'none';
    }
}

 <table border="0" width="100%" id="table1">
    <tr>
        <td width="144">Show/hide</td>
        <td><select name="something" id="tools" onChange="showoptions()">
        <option value="show">show</option>
        <option value="hide">Hide</option>
        </select>
        </td>
    </tr>
    <tr id="show" style="display:none;">
        <td><input type="text" name="amount" size="5"></td>
    </tr>
<table>

Answer 2

如果您了解HTML和PHP，那么跳入并使用Javascript和精彩的包装器jQuery将不会构成巨大的学习曲线。

以下是根据您提供的信息开始的示例代码：

<!-- include jquery reference in your head -->
<head>
    ...
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    ...

</head>
<body>
<script type="text/javascript">
   function changeDiv(link)
   {
      var contentDiv = $('#content');
      if (link == '1')
         contentDiv.html('<span style="color:red;">Link 1</span>');
      if (link == '2')
         contentDiv.html('<span style="color:red;">Link 2</span>');

   }
</script>
<div id="menu">
    <ul class="menu-item"><a id="link1" onclick="changeDiv('1')">home</a></ul>
    <ul class="menu-item"><a id="link2" onclick="changeDiv('2')">home</a></ul>
    <ul class="menu-item"><a id="link3" onclick="changeDiv('3')">home</a></ul>
</div>
<div id="content">

</div>

菜单栏仅在一个div中更改内容

2 个答案: