小贝子编程

如何正确地写一个javascript代码，通过onClick事件改变一个div的文本



我是javascript的新手，我正在写一个简单的网站，当用户单击任何菜单链接时，我有一个改变div内容的问题。到目前为止，我已经尝试了以下代码:

当用户点击菜单的div文本内容将改变。例如，当用户点击新闻菜单 "<div class="paneltitle" id="contenttitle">Home</div>"应该将内容从HOME更改为NEWS

 <div id="wrapper">
    <div id="content">
        <div class="menu">
<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
  <li><a href="#" onclick="changetitle_news()">News</a></li>
  <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
  <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
        </div>

        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
</div>


CSS 

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding: 5px;
}
a {
    display: block;
    width: 60px;
    text-decoration: none;
}
.menu {
    float: left;
}
.body_content {
    float: left;
    height: 380px;
    background: red;
    width: 620px
}
.paneltitle {
    background: gray;
    width: 98.5%;
    padding: 5px;
}


JS 

function changetitle_home() {
document.getElementById("contenttitle").innerHTML = "Home";
}
function changetitle_news() {
document.getElementById("contenttitle").innerHTML = "News";
}
function changetitle_contact() {
document.getElementById("contenttitle").innerHTML = "Contact";
}
function changetitle_about() {
document.getElementById("contenttitle").innerHTML = "About Us";
}

查看我的JSfiddle在这里http://jsfiddle.net/453j50uL/1/

您发布的代码在组合成页面并加载到浏览器中时工作得很好。复制并保存以下代码为HTML文件，并将其加载到浏览器中。为了清晰起见，我已经剥离了CSS，但请随意将其放回去。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function changetitle_home() {
            document.getElementById("contenttitle").innerHTML = "Home";
        }
        function changetitle_news() {
            document.getElementById("contenttitle").innerHTML = "News";
        }
        function changetitle_contact() {
            document.getElementById("contenttitle").innerHTML = "Contact";
        }
        function changetitle_about() {
            document.getElementById("contenttitle").innerHTML = "About Us";
        }
    </script>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <div class="menu">
            <ul>
                <li><a href="#" onclick="changetitle_home()">Home</a></li>
                <li><a href="#" onclick="changetitle_news()">News</a></li>
                <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
                <li><a href="#" onclick="changetitle_about()">About</a></li>
            </ul>   
        </div>
        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>
一个更好的方法是使用一个可重用的函数来设置标题，例如:

function setPageTitle(title) {
    document.getElementById('contenttitle').innerHTML = title;
}
现在，在函数调用中，将所需的标题作为参数传递:

<a href="#" onclick="javascript:setPageTitle('Home');">Home</a>

根据你的JSFiddle你应该改变框架&jQuery 1.10.1下的扩展选项到No wrap - in <body>。现在应该可以了!

我没有足够的声誉来评论，所以它是在答案块。只需复制脚本块中的函数并将其粘贴到。我试过了，效果不错。

<div id="wrapper">
<div id="content">
    <div class="menu">
        <script>    function changetitle_home() {
    document.getElementById("contenttitle").innerHTML = "Home";
}
function changetitle_news() {
    document.getElementById("contenttitle").innerHTML = "News";
}
function changetitle_contact() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
function changetitle_about() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}
        </script>            
<ul>
  <li><a href="#" onclick="changetitle_home()">Home</a></li>
 <li><a href="#" onclick="changetitle_news()">News</a></li>
 <li><a href="#" onclick="changetitle_contact()">Contact</a></li>
 <li><a href="#" onclick="changetitle_about()">About</a></li>
</ul>   
    </div>

    <div class="body_content">
        <div class="paneltitle" id="contenttitle">Home</div>
    </div>    
</div>

谢谢!

您的代码没有问题，它应该工作。脚本的位置只会导致这个问题。

我已经将脚本移动到HTML内容中，现在它像你期望的那样工作得很好。

检查这个小提琴: Demo

您需要改变定义函数的方式。如果你像下面这样定义它们，它们就会挂在窗口对象上，这样你就可以从html中引用它们。请查看以下jsfiddle以获取工作版本:https://jsfiddle.net/3o3rk889/1/

changetitle_home = function() {
        document.getElementById("contenttitle").innerHTML = "Home";
}
changetitle_news = function(){ 
    document.getElementById("contenttitle").innerHTML = "News";
}
changetitle_contact = function() {
    document.getElementById("contenttitle").innerHTML = "Contact";
}
changetitle_about = function() {
    document.getElementById("contenttitle").innerHTML = "About Us";
}

您定义它们的方式使它们没有句柄。另外，最重要的提示:你可以使用fiddler的开发工具(chrome或IE中的F12)，它会显示javascript中的任何错误。这样做会在单击按钮时显示未定义的错误。

http://codepen.io/anon/pen/vOjNRw

我知道这已经回答了，但为了写好的javascript和保持你的HTML干净(不使用onclick)这里是我如何做到这一点:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var contentTitle = document.getElementById("contenttitle");
    var links = document.querySelectorAll("#navigation a");
    Array.prototype.forEach.call(links, function(link){
      link.addEventListener('click', function(e){
        contentTitle.innerHTML = e.target.innerHTML;
      }, false);
    });
</script>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div class="menu">
                <ul id="navigation">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>   
            </div>
        <div class="body_content">
            <div class="paneltitle" id="contenttitle">Home</div>
        </div>    
    </div>
</div>
</body>
</html>

从

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }
});//]]>  
</script>

: 

<script type="text/javascript">//<![CDATA[ 
    function changetitle_home() {
        document.getElementById("contenttitle").innerHTML = "Home";
    }
    function changetitle_news() {
        document.getElementById("contenttitle").innerHTML = "News";
    }
    function changetitle_contact() {
        document.getElementById("contenttitle").innerHTML = "Contact";
    }
    function changetitle_about() {
        document.getElementById("contenttitle").innerHTML = "About Us";
    }
//]]>  
</script>

对于所有的链接，你可以使用一个独特的函数，看起来像这样:

var changeTitle = function(target){
   document.getElementById("contenttitle").innerHTML = target.innerHTML;
};

你的菜单的HTML将看起来像

<ul>
  <li><a href="#" onclick="changeTitle(this)">Home</a></li>
  <li><a href="#" onclick="changeTitle(this)">News</a></li>
  <li><a href="#" onclick="changeTitle(this)">Contact</a></li>
  <li><a href="#" onclick="changeTitle(this)">About</a></li>
</ul>

另一种选择肯定是使用jQuery:

$('div.menu a').click(function(e){
    $('#contenttitle').text($(e.target).text());
});

查看我的示例代码，然后您了解javascript onclick事件是如何发生的。

<

看到演示/strong> 

<ul>
    <li class="abc" data-id="abc1">Home</li>
    <li class="abc" data-id="abc2">about</li>
    <li class="abc" data-id="abc3">serive</li>
    <li class="abc" data-id="abc4">contact</li>
</ul>
<div class="mm" id="abc1">Home worlld</div>
<div class="mm" id="abc2">about worlld</div>
<div class="mm" id="abc3">Service worlld</div>
<div class="mm" id="abc4">Contact worlld</div>
$(document).ready(function(){
    $(".mm").hide();
    $("#abc1").show();
    $(".abc").click(function(){
          var mm = $(this).data("id");
            $(".mm").hide();
            $("#"+mm).show();
      });
});

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium